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

相关推荐
PairsNightRain14 小时前
React.lazy 和 suspense 如何使用?
前端·javascript·react.js
车前端15 小时前
理解 React 状态管理
react.js
深蓝电商API15 小时前
网页结构解析入门:HTML、CSS、JS 与爬虫的关系
javascript·css·html
Python私教18 小时前
React 19 如何优雅整合 Ant Design v5 与 Tailwind CSS v4
前端·css·react.js
刺客_Andy18 小时前
React 第四十一节Router 中 useActionData 使用方法案例以及注意事项
前端·react.js
刺客_Andy18 小时前
React 第四十二节 Router 中useLoaderData的用途详解
前端·react.js
刺客_Andy18 小时前
React 第四十三节 Router中 useBlocker 的使用详解及案例注意事项
前端·react.js
汤姆Tom18 小时前
写这么多年CSS,都不知道什么是容器查询?
前端·css·面试
曦曜29218 小时前
聊聊前端静态页面的开发
css·html
千码君201619 小时前
React Native::关于react的匿名函数
javascript·react native·react.js·匿名函数·usecallback·命名函数·记忆化函数