reactjs - 在 React 中从字符串渲染 HTML + JavaScript

Question

有没有办法从 React 组件内部的字符串（作为服务器响应）呈现实际的html + javascript ？

React 通常不允许通过 javascript 的innerHTML插入类似的内容。但是有没有办法绕过它并真正让 html + js 工作？

import React from "react";

const CodeFromServer = () => {
  return "<div onClick={() => console.log(234234)}>Show in console</div>";
};

export default function App() {
  return <CodeFromServer />;
}

在浏览器中呈现的是：

<div onClick={() => console.log(234234)}>Show in console</div>

不是真正的按钮

---

我也尝试了这些方法/包，但它们只呈现 html：

• 危险地设置InnerHTML
• 反应内部 html
• html-react-解析器

Answer 1

这是你要找的吗？

import React from "react";


export default function App() {


  const CodeFromServer  = "<div onClick={console.log(234234)}>Show in console</div>";


  return (
    <div className="App">
     <div dangerouslySetInnerHTML={{__html:CodeFromServer}}></div>
    </div>
  );
}

当 div 获得 onClick 时，它会显示在控制台上