如何将 html 解析为 React 组件？

Question

这是我的情景：

1. 页面内容的应用请求CMS（内容管理系统）。

2. CMS返回 "<div>Hi,<SpecialButton color="red">My Button</SpecialButton></div>"

3. 应用程序消费内容，使用属性中提供的数据渲染相应的组件。

我不知道如何以 React 方式执行 第 3 步，不胜感激。

感谢@Glenn Reyes，这是一个显示问题的 沙盒。

 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'));

这是 Vuejs 制作的现场演示。字符串 "<div v-demo-widget></div>" 可以被视为 Vuejs 指令并呈现。 源代码。

原文由 Sing 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可能想更深入地了解 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

原文由 glennreyes 发布，翻译遵循 CC BY-SA 3.0 许可协议