我是如何在react中把一个集成了html,css的内容放到页面中的

这篇具有很好参考价值的文章主要介绍了我是如何在react中把一个集成了html,css的内容放到页面中的。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

我是如何在react中把一个集成了html,css的内容放到页面中的

首先把html,css内容进行一个变量化,然后利用useState()去初始化一个变量,最后同通过一个标签属性就好了dangerouslySetInnerHTML={变量}

import React, {useEffect, useState} from "react";
import {contentHtml} from "@/pages/Developer/constant";
const Developer: React.FC = () => {
    const [html, setHtml] = useState('');

    useEffect(() => {
      setHtml(contentHtml)
    }, []);

    return (
      <div dangerouslySetInnerHTML={{ __html: html }} />
    );
}
export default Developer;

通过这样我把 typora 导出的 html 就可以直接放到上面展示了。文章来源地址https://www.toymoban.com/news/detail-754463.html

到了这里,关于我是如何在react中把一个集成了html,css的内容放到页面中的的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React 通过一个输入内容加入列表案例熟悉 Hook 基本使用

    我们创建一个react项目 在src下创建components文件夹 在下面创建一个index.jsx index.jsx 参考代码如下 首先 我们通过一个比较典型的方法定义了一个用于声明表单元素绑定响应式数据的的函数useInputValue 接收一个参数 用于做响应式数据的默认值 然后暴露他的value 同时 绑定了一个o

    2024年02月09日
    浏览(43)
  • 制作一个简单HTML静态网页(HTML+CSS)

    🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (

    2024年02月03日
    浏览(74)
  • 浏览器中把HTML转为PDF的几种方式

    操作步骤 另存为pdf 优点 简便易用: 浏览器自带的打印功能通常是用户界面友好的,不需要额外的插件或工具,用户只需点击几下即可完成转换。 跨平台支持: 大多数现代浏览器都支持这种方式,而且通常在不同操作系统上表现一致,从而实现跨平台的HTML到PDF的转换。 无

    2024年01月18日
    浏览(53)
  • 1 请使用js、css、html技术实现以下页面,表格内容根据查询条件动态变化。

            注意:         1.背景颜色用ppt的取色器来获取:                 先点击ppt的形状轮廓,然后点击取色器,吸颜色,然后再点击形状轮廓的其他轮廓颜色,即可获取到对应颜色。           2.表格间的灰色线是在th和td中用border属性设置的;         3.在js中拼

    2024年02月16日
    浏览(43)
  • html+css画一个姜饼人

    html代码 css代码 更多文章查看

    2024年02月01日
    浏览(46)
  • 制作一个简单HTML个人网页网页(HTML+CSS)源码

    一个简单的HTML网页,可用于大学html期末作业,照片都是网上找的 看一下成品图: 主页代码,这里的link href=\\\"images/css.css\\\" rel=\\\"stylesheet\\\" type=\\\"text/css\\\" /是引入css样的,images里面装的是css文件(完整源码见文末)  

    2024年02月11日
    浏览(64)
  • 制作一个简单HTML电影网页设计(HTML+CSS)

    HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 1 网页简介:此作品为学生个人主页网页设计题材

    2024年02月09日
    浏览(92)
  • 制作一个简单HTML中华传统文化网页(HTML+CSS)

    🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (

    2024年02月08日
    浏览(63)
  • 使用HTML+CSS写一个静态页面

    刚开始学习前端,在仅使用HTML和CSS的情况下,也可以写出一个页面,使用HTML对页面的内容进行架构,再此基础上使用CSS对内容进行美化。其中涉及了许多HTML和CSS的知识点,定位 浮动 链接 等,修改字体、图片大小、背景颜色、鼠标样式、鼠标与页面的交互、行内元素与块元

    2024年02月11日
    浏览(53)
  • 一个简单的HTML网页——传统节日春节网页(HTML+CSS)

    🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (

    2024年01月21日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包