javascript - 将 JSX 格式的字符串注入(inject) React 组件

Question

我有一个应该编译和显示 html 字符串的小型 React 页面。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')
);

上面代码的Result只是一个字符串，我想知道有没有办法将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>没有用

提前致谢

编辑:代码是here

Answer 1

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

---

情况 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 - 您的字符串尚未准备好，在插入之前需要额外的逻辑

如果您的字符串尚未“准备好”直接注入(inject) DOM，但需要先进行某种处理(例如，您的字符串包含需要首先解释的变量)，事情会变得更加复杂。不幸的是，没有好的或“推荐”的方法来做到这一点。

• 如果所需的操作简单且相当静态，您或许可以使用正则表达式。尽管这种方法有局限性。这种方法的用例可能是操纵 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.createElement 创建 React 元素的函数调用。要在 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的更多详细信息, 请参阅 official documentation .