在 reactjs 中渲染变量组件名称答案

【问题标题】：Render variable component name in reactjs在 reactjs 中渲染变量组件名称
【发布时间】：2016-02-25 11:19:12
【问题描述】：

我正在做一个 Meteor + React 项目。请原谅我在这里听起来有点菜鸟，但我需要一些帮助来动态调用 React 组件。例如，我有三个组件<ComponentA />、<ComponentB /> 和<ComponentC />。但是，我想动态渲染它们；

var comp = /*some function that brings a string here*/; // this variable 'comp' could 
//be either of the ComponentA, ComponentB and ComponentC.

将此 comp 变量呈现为反应组件的最佳方法是什么？

以下是系统应该如何工作：

if (Meteor.isClient) {
    WelcomeComponent = React.createClass({
        render() {
            return <div><h1>Hello, {this.props.name}</h1></div>
        }
    });

    GoodbyeComponent = React.createClass({
        render() {
            return <div><h1>Bye Bye, {this.props.name}</h1></div>
        }
    });

    MainLayout = React.createClass({
      render() {
        return <div>
          <header>
            This is our header
          </header>
          <main>
            {this.props.content}
          </main>
          <footer>
            This is our footer
          </footer>
        </div>
      }
    });
    if (login){
        var comp = 'WelcomeComponent';
    }else{
        var comp = 'GoodbyeComponent';
    }

    // I want above 'comp' variable to be used for rendering/loading/producing respective component

    ReactLayout.render(MainLayout, {content:<WelcomeComponent name="Kavish"/>})
    // ReactLayout.render(MainLayout, {content:<GoodbyeComponent name="Kavish"/>})
}

comp 变量可以是字符串格式的组件名称。请告知如何使用变量 comp 调用函数来加载所需的组件。

【问题讨论】：

标签： meteor reactjs

【解决方案1】：

React 有 createElement 方法来动态创建一个元素。该方法采用三个参数。类型、道具和儿童。

这里是抽象：

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)

这里是用法：

var child = React.createElement('li', null, 'Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child);
ReactDOM.render(root, document.getElementById('example'));

详情请访问：https://facebook.github.io/react/docs/top-level-api.html

【讨论】：

【解决方案2】：

您可以让 className 呈现如下：

var comp = this.props.type; // should be string
var actualComponent = window[comp];

现在，如果您使用 ReactLayout，请使用：

ReactLayout.render(actualComponent, {... your props here});

【讨论】：

但windows[comp] 在我尝试在控制台上登录时显示未定义。
好吧，不是windows，而是window
我的错误，这是一个错字，但我尝试了window[comp]。请再次查看问题，为了更具体地解释我的问题，我做了一些更改。
好的，那么首先渲染是什么意思。您是在 Routes 函数中还是在组件本身中使用此函数？贴出包含变量 comp 的代码，看看我能不能帮你完成。
你会只用这个来登录吗？因为我建议你应该只把这些放在路由器级别

【解决方案3】：

您可以在类的构造函数中设置状态变量和它的父类：

if (typeof this.state == 'undefined') {
  this.state = {
    componentsToRender: <div></div>
  };
}

然后在父组件中，在componentDidMount()函数中：

var componentsToRender = [];
if ([conditional]) {
  // some logic so you know which component to render
  componentsToRender.push(<customChildComponentToRender key={} />);
}
else {
  componentsToRender.push(<otherComponentToRender key={} />);
}
this.setState({
  componentsToRender: <div>{componentsToRender}</div>
});

【讨论】：