Javascript 如何将 html 解析为 React 组件？

How to parse html to React component?

提问by Sing

This is my senario :
1. Application request CMS(Content management system) for page contents.
2. CMS return "<div>Hi,<SpecialButton color="red">My Button</SpecialButton></div>"
3. Application consume the content, render corresponding component with data provided in attribute.

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

I can't figure out how to do step 3in React way, any advice is appreciated.

我不知道如何以React 方式执行第 3 步，任何建议表示赞赏。

Thanks @Glenn Reyes, here's a Sandboxto show the problem.

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

Here is a live demomade by Vuejs. String "<div v-demo-widget></div>"could be treat as Vuejs directive and rendered. Source Code.

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

回答by glennreyes

You probably want to look deeper into dangerouslySetInnerHTML. Here is an example how to render HTML from a string in a React component:

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

Full example here: https://codesandbox.io/s/xv40xXQzE

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

Read more about dangerouslySetInnerHTMLin the React docs here: https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml

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

回答by EsterlingAccime Youtuber

You can use the react-html-parserin case you don't want to use dangerouslySetInnerHTMLattribute

您可以使用react-html-parser的情况下，你不希望使用dangerouslySetInnerHTML属性

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

Happy Coding!!!

编码快乐！！！

回答by GProst

You can try use ReactDOMserverto render <MyReactComponent />into htmlon your server and then pass it to the client, where you can insert all received htmlvia dangerouslySetInnerHTML.

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

回答by lost_in_magento

For any from the future just enhancement of GProst Answer, You can use ReactDOMserver, This is how we can implement the same.

对于未来对 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"));