使用其名稱反映渲染組件

Question

我正在試驗React.js，它工作得非常好。 我想知道是否有可能將類注入其他類，如下所示：

var Container = React.createClass({
    render: function() {
      <{this.props.implComponent}/>
    }
});

假設implComponent已經像這樣傳遞：

React.render(
  <Container implComponent="somePredefinedVariable" />,
   document.getElementById('content')
);

由於語法錯誤，這不起作用。 我很容易理解為什么。

換句話說，我想根據名稱將類注入其他類。 這可能嗎？ 我怎樣才能做到這一點？

Answer 1

你很親密 你需要自己傳遞組件類（不是字符串），然后因為標簽語法已經采用了一個變量，你就擺脫了{} 。 另外，不要忘記從渲染中返回節點。

var Container = React.createClass({
    render: function() {
        return <this.props.implComponent />
    }
});

React.render(
  <Container implComponent={SomePredefinedVariable} />,
   document.getElementById('content')
);

如果要傳遞基本dom組件，則使用字符串

如果你考慮轉換結果，這是有道理的

var Container = React.createClass({displayName: "Container",
    render: function() {
      return React.createElement(this.props.implComponent, null)
    }
});

ReactDOM.render(
  React.createElement(Container, {implComponent: SomePredefinedVariable}),
   document.getElementById('content')
);

ReactDOM.render(
  React.createElement(Container, {implComponent: "div"}),
   document.getElementById('content')
);