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

相关推荐
LaughingZhu7 小时前
Product Hunt 每日热榜 | 2026-07-28
前端·神经网络·react.js·搜索引擎·前端框架
Highcharts.js14 小时前
教程:基于 React + Highcharts 构建一个单页应用程序、按需数据拉取与图表渲染
开发语言·前端·数据结构·react.js·前端框架·highcharts·页面应用
To_OC14 小时前
我被 useState 坑了两次之后,终于把它的脾气摸透了
前端·javascript·react.js
浮生望15 小时前
React useState 深度解析:异步更新、闭包陷阱与惰性初始化的底层逻辑
react.js
Patrick_Wilson18 小时前
从 React 到 Flutter:写给前端的一张跨端知识地图
前端·flutter·react.js
寒水馨1 天前
Windows下载、安装 Tailwind CSS-v4.3.3(附安装包tailwindcss-windows-x64.exe)
前端·css·前端开发·tailwind css·utility-first·css 框架·独立 cli
2301_764441331 天前
智慧农业管理平台灵感
开源·html
张元清1 天前
React useDropZone Hook:搭建一个文件拖放区(2026)
javascript·react.js
a1117761 天前
3D 建筑编辑器 Pascal Editor THreeJS 开源
前端·3d·html
思码梁田1 天前
CSS 定位详解:从相对到固定,掌握网页布局的核心
前端·javascript·css