我有一个小反应页面,应该编译并显示html字符串。用react- foundation编写的字符串中的html
该页面如下所示:
import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { Link, Button, Colors } from 'react-foundation'; require('./foundation.css') var htmlFromApi = '<div className="button-basics-example"><Button color={Colors.SUCCESS}>Save</Button><Button color={Colors.ALERT}>Delete</Button></div>'; var App = ({ html }) => { return <div>{html}</div> } ReactDOM.render( <App html={htmlFromApi}/>, document.getElementById('react') );
上面代码的结果只是一个字符串,我想知道是否有一种方法可以将html字符串转换为react元素
像这样的东西:
var reactElement= toReactElement(htmlFromApi); //the result is <div className="button-basics-example"><Button color={Colors.SUCCESS}>Save</Button><Button color={Colors.ALERT}>Delete</Button></div>
PS我尝试 <div className="content" dangerouslySetInnerHTML={{ __html: htmlFromApi }}></div>了但没用
<div className="content" dangerouslySetInnerHTML={{ __html: htmlFromApi }}></div>
提前致谢
编辑:代码在这里
我最初提供了一个关于如何将HTML字符串直接插入React的答案。但是,由于您还希望在将字符串内的变量(以及其他潜在的逻辑)插入到React中之前对其进行解析,因此我在此处保留了这两个选项,因为它们可能对将来的读者有用。
如果包含HTML的字符串可以直接插入React,并且不包含需要首先解析的代码,则应使用dangerouslySetInnerHTML。您应该在包含来自API的HTML的包装div上进行设置。
dangerouslySetInnerHTML
请参见下面的示例。
var htmlFromApi = '<div className="button-basics-example"><Button color={Colors.SUCCESS}>Save</Button><Button color={Colors.ALERT}>Delete</Button></div>'; var App = ({html}) => { return <div dangerouslySetInnerHTML={{ __html: html}}></div> } ReactDOM.render(<App html={htmlFromApi}/>, document.getElementById('app')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> <div id="app"></div>
如果您的字符串不是“准备好”直接插入到DOM中,而是需要首先进行某种处理(例如,您的字符串包含需要首先解释的变量),则事情会变得更加复杂。不幸的是,没有好的或“推荐的”方式来做到这一点。
babel-core
这是从上方实现第3点的方法:
Babel.transform(code, options);
code您的html字符串在哪里。在其中,options我们需要传递一个对象,{presets: ['react']}以使Babel理解将JSX作为我们的输出。您当然也可以在此处添加其他选项。
code
options
{presets: ['react']}
这将返回一个对象,其中包含诸如源映射之类的东西,但是我们仅对此处生成的代码感兴趣。因此,我们需要添加:
Babel.transform(code, options).code;
请注意,这code是字符串格式的javascript代码,它表示一个函数调用,以创建一个React元素React.createElement。要将字符串作为javascript中的代码执行,我们可以使用eval()。
React.createElement
eval()
然后,我们可以将该React元素添加到React组件中,并正常渲染它,如下面的示例所示。
var htmlFromApi = '<div className="button-basics-example"><Button color={Colors.SUCCESS}>Save</Button><Button color={Colors.ALERT}>Delete</Button></div>'; var Colors = {SUCCESS: "green", ALERT: "red"}; var App = ({html}) => { var Component = Babel.transform(htmlFromApi, {presets: ["react"]}).code; return <div>{eval(Component)}</div>; }; var Button = ({color, children}) => ( <button style={{backgroundColor: color}}>{children}</button> ); ReactDOM.render(<App />, document.getElementById("app")); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div>
有关更多详细信息Babel.transform,请参见官方文档。
Babel.transform