javascript – 从字符串中反映渲染组件

是否可以从字符串动态呈现React组件？

基本上我有来自数据库的页面内容,我想在内容中包含React组件.我正在努力实现的一个例子：

var html_string = '<i>React Component Rendered</i>: <Hello name="World" />';

var Hello = React.createClass({
  render: function() {
    return <strong>Hello {this.props.name}</strong>;
  }
});

function createMarkup() { return {__html: html_string}; };

var App = React.createClass({
  render: function() {
    return <div dangerouslySetInnerHTML={createMarkup()} />;
  }
});

ReactDOM.render(
  <App/>,
  document.getElementById('container')
);

但它只是渲染HTML而不评估< Hello />：

<div><i>React Component Rendered</i>: <hello name="World"></hello></div>

我想要：

<div><i>React Component Rendered</i>: <strong>Hello World</strong></div>

这个例子在JSfiddle：https://jsfiddle.net/26czprne/上

解决方法:

正如thangngoc89所说,没有办法做到这一点.至少没有简单的方法.

JSX被转换为javascript,它只在语法上看起来像xml.

这个：

var x = <div> <i>React Component Rendered</i>: <Hello name="World" /> </div>;

映射到：

var x = React.createElement(
  "div",
  null,
  " ",
  React.createElement(
    "i",
    null,
    "React Component Rendered"
  ),

  ": ",
  React.createElement(Hello, { name: "World" }),
);

一个更好的策略可能是解析数据库元素,然后使用react动态呈现db查询的结果(这也会促进更松散的耦合).

标签：javascript,reactjs,react-jsx
来源： https://codeday.me/bug/20191007/1866194.html