将JSX格式的字符串注入React组件

小编典典

将JSX格式的字符串注入React组件

reactjs

我有一个小反应页面，应该编译并显示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>了但没用

提前致谢

编辑：代码在这里

阅读 408

2020-07-22

共1个答案

小编典典

我最初提供了一个关于如何将HTML字符串直接插入React的答案。但是，由于您还希望在将字符串内的变量（以及其他潜在的逻辑）插入到React中之前对其进行解析，因此我在此处保留了这两个选项，因为它们可能对将来的读者有用。

情况1-准备插入您的字符串

如果包含HTML的字符串可以直接插入React，并且不包含需要首先解析的代码，则应使用dangerouslySetInnerHTML。您应该在包含来自API的HTML的包装div上进行设置。

请参见下面的示例。

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>

情况2-您的字符串尚未准备好，需要其他逻辑才能插入

如果您的字符串不是“准备好”直接插入到DOM中，而是需要首先进行某种处理（例如，您的字符串包含需要首先解释的变量），则事情会变得更加复杂。不幸的是，没有好的或“推荐的”方式来做到这一点。

如果所需的操作是简单且相当静态的，则可以使用regex。尽管这种方法有局限性。这种方法的用例可能是操纵DOM类或向字符串添加元素。
另一种方法是使用诸如html-to-react之类的库，它可能会帮助您找到所需的内容。
最后，如果您正在使用Babel（几乎可以肯定），则可以使用Babel变压器。您所需babel-core要做的就是导入代码并将字符串转换为JSX。与使用库相比，此方法可能更受限制，但足够了。

这是从上方实现第3点的方法：

Babel.transform(code, options);

code您的html字符串在哪里。在其中，options我们需要传递一个对象，{presets: ['react']}以使Babel理解将JSX作为我们的输出。您当然也可以在此处添加其他选项。

这将返回一个对象，其中包含诸如源映射之类的东西，但是我们仅对此处生成的代码感兴趣。因此，我们需要添加：

Babel.transform(code, options).code;

请注意，这code是字符串格式的javascript代码，它表示一个函数调用，以创建一个React元素React.createElement。要将字符串作为javascript中的代码执行，我们可以使用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，请参见官方文档。

2020-07-22