javascript – 如何将html解析为React组件？

2019-10-04 10:33:27 阅读：474 来源： 互联网

标签：html javascript reactjs compilation content-management-system

这是我的晚会：
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制作.字符串“< 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!  
 
标签：html,javascript,reactjs,compilation,content-management-system	

来源： https://codeday.me/bug/20191004/1852712.html 


本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；

2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；

3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；

4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；

5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 如何将html解析为React组件？