这是我的 senario :
1.页面内容申请请求CMS(Content management system)
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 制作。字符串 "<div v-demo-widget></div>"
可以被视为 Vuejs 指令并呈现。 Source Code .
最佳答案
您可能想深入了解 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
关于javascript - 如何将 html 解析为 React 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44643424/