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

相关推荐
张元清4 小时前
React useScrollLock Hook:为弹窗锁住页面滚动 (2026)
javascript·react.js
kisshyshy7 小时前
从 useRef 到 Web Worker:理解 React 可变对象与浏览器多线程
前端·javascript·react.js
产品设计大观8 小时前
实测墨刀AI生成光伏储能管理后台,快速交付高保真界面和React源码
人工智能·react.js·墨刀
zhanghaha13148 小时前
HTML系列教程:3_HTML 基础标签 — 标题、段落、超链接、图像
前端·html
拾年27510 小时前
前后端分离开发,别再"傻等"后端接口了——聊聊前端接口工程
前端·javascript·react.js
breeze jiang10 小时前
CSS 三栏布局怎么写:Flex、Grid 完整方案与 BFC 区别
前端·css
何时梦醒10 小时前
CSS 三栏布局与 BFC 深度解析:Float、Flex、Grid 三种方案一网打尽
前端·css·面试
烬羽11 小时前
CSS 三栏布局:`margin-left: -100%` 凭什么把侧栏「拽」回上一行?彻底搞懂负 margin
css·面试·前端框架
半个落月11 小时前
React 受控组件与非受控组件详解:从输入框到表单校验
前端·react.js
BreezeJiang11 小时前
写了 display:flex,为什么三栏布局还没完成?
前端·css