從字符串反應渲染組件

Question

是否可以從字符串動態渲染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/

Answer 1

正如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查詢的結果（這也會促進松散耦合）。

Answer 2

可能要晚一點參加這個聚會，但是發現自己需要做些類似的事情，並且在網上搜索后，我發現這實際上在技術上是可行的（除了安全問題）-除了一個不錯的反應包：

https://github.com/TroyAlford/react-jsx-parser

import React, { Component } from 'react'
import JsxParser from 'react-jsx-parser'

class InjectableComponent extends Component {
  // ... inner workings of InjectableComponent
}

class MyComponent extends Component {
  render() {
    /* Pull out parent props which shouldn't be bound,
       then pass the rest as `bindings` to all children */
    const { prop1, prop2, ...bindings } = this.props

    return (
      <JsxParser
        bindings={bindings}
        components={{ InjectableComponent }}
        jsx={'\
          <h1>Header</h1>\
          <InjectableComponent />\
        '}
      />
    )
  }
}

全部歸功於TroyAlford！

Answer 3

你問的是不可能的。 React會轉儲您通過dangerouslySetInnerHTML提供的字符串。 它不會評估其中的任何內容。