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

相关推荐
妃衣39 分钟前
html页面,富文本转word 、Html to Word(docx)
前端·html·word·html转word
光影少年1 小时前
开发RN项目时,如何调试iOS真机、Android真机?常见调试问题排查?
android·前端·react native·react.js·ios
爱上好庆祝1 小时前
clip-path裁剪,css的滤镜,动画时间线,css的变量和函数
前端·css·学习·html·css3
妃衣1 小时前
Html转word追加篇,关于hr标签分割线的显示
java·html·word
Bigger2 小时前
第六章:我是如何剖析 Claude Code 的终端界面渲染原理的
前端·react.js·claude
冲浪中台2 小时前
20个常用的CSS知识点
前端·css
榴莲omega2 小时前
第14天:React 工程化与设计模式
前端·react.js·设计模式
CodeAI16 小时前
TailwindCSS 核心概念与实用技巧:从传统CSS到Utility-First迁移指南
css
前端那点事19 小时前
React 18+ 所有Hooks全解析(含实战示例,新手零踩坑)
react.js
snow_yan19 小时前
AI 对话流式输出: 实现“逐字丝滑、不闪烁、不卡顿”的打字机效果
前端·react.js·openai