使用其名称来响应渲染组件

小编典典

使用其名称来响应渲染组件

reactjs

我正在实验React.js，它运行得很好。我想知道是否有可能像这样将类注入其他类：

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

假设implComponent已通过，如下所示：

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

由于语法错误，此方法不起作用。我很容易理解为什么。

换句话说，我想根据名称将类注入其他类。这可能吗？我怎样才能做到这一点？

阅读 243

2020-07-22

共1个答案

小编典典

你近了您需要将自身传递给组件类（而不是字符串），然后由于标记语法已经接受了变量，因此您摆脱了{}s的要求。同样不要忘记从渲染返回节点。

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')
);

2020-07-22