如何将 html 解析为 React 组件？

Question

这是我的情景：
1.页面内容的应用请求CMS（内容管理系统）。
2. CMS返回"<div>Hi,<SpecialButton color="red">My Button</SpecialButton></div>"
3. 应用消费内容，用属性提供的数据渲染对应的组件。

我不知道如何以 React 方式执行 第 3 步，感谢任何建议。

感谢@Glenn Reyes，这里有一个Sandbox 来显示问题。

import React from 'react';
import { render } from 'react-dom';

const SpecialButton = ({ children, color }) => (
  <button style={{color}}>{children}</button>
);

const htmlFromCMS = `
<div>Hi, 
  <SpecialButton color="red">My Button</SpecialButton>
</div>`;

const App = () => (
  <div dangerouslySetInnerHTML={{__html: htmlFromCMS}}>
  </div>
);

// expect to be same as
// const App = () => (
//   <div>Hi, 
//     <SpecialButton color="red">My Button</SpecialButton>
//   </div>
// );

render(<App />, document.getElementById('root'));

Here is a live demo 由 Vuejs 制作。 String "<div v-demo-widget></div>" 可以被视为 Vuejs 指令并被渲染。 Source Code.

Answer 1

您可以尝试使用ReactDOMserver 在您的服务器上将<MyReactComponent /> 渲染成html，然后将其传递给客户端，您可以在客户端通过dangerouslySetInnerHTML 插入所有收到的html。

Answer 2

您可能想深入了解dangerouslySetInnerHTML。这是一个如何从 React 组件中的字符串呈现 HTML 的示例：

import React from 'react';
import { render } from 'react-dom';

const htmlString = '<h1>Hello World! ?</h1>';

const App = () => (
  <div dangerouslySetInnerHTML={{ __html: htmlString }} />
);

render(<App />, document.getElementById('root'));

此处为完整示例：https://codesandbox.io/s/xv40xXQzE

在此处的 React 文档中阅读有关 dangerouslySetInnerHTML 的更多信息：https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml

Answer 3

对于未来的任何 GProst Answer 增强功能，您都可以使用 ReactDOMserver，这就是我们可以实现相同功能的方式。

import React from "react";
import { render } from "react-dom";
import { renderToString } from "react-dom/server";

const SpecialButton = ({ children, color }) => (
  <button style={{ color }}>{children}</button>
);

const renderButton = renderToString(<SpecialButton>MyButton</SpecialButton>);

const htmlFromCMS = `
<div>Hi, 
  ${renderButton}
</div>`;

const App = () => <div dangerouslySetInnerHTML={{ __html: htmlFromCMS }} />;

render(<App />, document.getElementById("root"));

Answer 4

如果您不想使用dangerouslySetInnerHTML 属性，可以使用react-html-parser

import React from 'react';
import { render } from 'react-dom';
import ReactHtmlParser from 'react-html-parser';

const SpecialButton = ({ children, color }) => (
  <button style={{color}}>{children}</button>
);

const htmlFromCMS = `
<div>Hi, 
  <SpecialButton color="red">My Button</SpecialButton>
</div>`;

const App = () => (
  <div>
     {ReactHtmlParser(htmlFromCMS)}
  </div>
);


render(<App />, document.getElementById('root'));

编码愉快！！！

Answer 5

正如 EsterlingAccimeYoutuber 在this 的回答中指出的那样，您可以使用parser，以防您不想使用dangerouslySetInnerHTML 属性。

到现在，react-html-parser已经3年没有更新了，所以我去寻找一个不同的模块。

html-react-parser 做同样的工作，但经常维护和更新。

清理html-String 以防止XSS 攻击应该是一个好习惯。 dompurify 可以用于此。

我将 EsterlingAccimeYoutuber 的代码示例更新为以下内容：

import React from 'react';
import { render } from 'react-dom';
import parse from 'html-react-parser';
import DOMPurify from 'dompurify';

const SpecialButton = ({ children, color }) => (
  <button style={{color}}>{children}</button>
);

const htmlFromCMS = `
<div>Hi, 
  <SpecialButton color="red">My Button</SpecialButton>
</div>`;

const htmlFrom = (htmlString) => {
        const cleanHtmlString = DOMPurify.sanitize(htmlString,
          { USE_PROFILES: { html: true } });
        const html = parse(cleanHtmlString);
        return html;
}

const App = () => (
  <div>
     {htmlFromCMS && htmlFrom(htmlFromCMS)}
  </div>
);


render(<App />, document.getElementById('root'));

受上述原帖启发，特此感谢原作者！