我是如何在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 就可以直接放到上面展示了。

相关推荐
ss27310 小时前
AI全栈实战 | 2.1-02 CSS 布局:垂直居中为什么是经典面试题?所有布局在解决什么矛盾
前端·css
IMPYLH18 小时前
HTML 的 <title> 元素
前端·javascript·html
5008418 小时前
React Native for OpenHarmony 实战:三方库 react-native-device-name 的鸿蒙化适配指南
深度学习·react native·react.js·机器学习·harmonyos
杨超越luckly18 小时前
上海社零数据:消费结构分化——1.66万亿盘子从+7.2%到-1.0%的十五年观察
html·agent·数据可视化·上海·社会消费品零售总额
peter676819 小时前
css揭秘-背景和边框
前端·css
5008419 小时前
React Native for OpenHarmony 实战:三方库 react-native-torch 的鸿蒙化适配指南
javascript·react native·react.js·harmonyos
5008420 小时前
React Native for OpenHarmony 实战:三方库 react-native-device-uptime 的鸿蒙化适配指南
javascript·分布式·react native·react.js·harmonyos
JudithHuang1 天前
React 列表与表单
react.js