如何解析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指令并呈现.源代码.

Answer 1

正如EsterlingAccimeYoutuber在这个答案中指出的，parser如果您不想使用dangerouslySetInnerHTML属性，可以使用 a 。

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

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

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

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

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

Answer 3

您可以使用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'));

快乐编码！

Answer 4

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