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

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

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

tsx 复制代码
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 就可以直接放到上面展示了。

相关推荐
子兮曰10 小时前
CSS 复现 23 种设计风格:从拟物到液态玻璃的成本阶梯与兜底写法【实战】
前端·css·视觉设计
濮水大叔12 小时前
函数式与对象式:前端架构的两种成本曲线
vue.js·react.js·函数式编程
java1234_小锋19 小时前
【技术专题】HTML5 网页技术 - HTML5 SVG
前端·html·html5
用户2986985301421 小时前
React 前端 Word 转图片:页面与元素级导出的工程实践
前端·javascript·react.js
志尊宝1 天前
AI原生前端开发(016):端侧AI与React 19结合实战
人工智能·react.js·ai-native
燕落南枝1 天前
CSS 学习:类型选择器与 AI 注释实战
css·人工智能·学习
时间的情敌2 天前
《回顾 2019 前端:React Hooks 问世,前端工程化爆发的一年》
前端·react.js·前端框架
燕落南枝2 天前
CSS 类选择器详解:从入门到实战
前端·css
iCxhust2 天前
模型:500kW飞轮 10kV输电线路 油田抽油机 同时考虑无功补偿 统计:全年节电量 结果56万度电
前端·css·css3·电力·飞轮
燕落南枝2 天前
CSS 后代选择器与子代选择器:从入门到实战
前端·css