动态渲染React组件

您不应该将组件段塞放在大括号中：

var Hello = React.createClass({
    render: function() {
        return <this.props.component.slug className='text'>
            {this.props.component.value}
        </this.props.component.slug>;
    }
});
React.renderComponent(<Hello component={{slug:React.DOM.div, value:'This is my header'}} />, document.body);

这是一把正在工作的小提琴：http://jsfiddle.net/kb3gN/6668/

此外，您还可以发现JSX编译器有助于调试此类错误：http://facebook.github.io/react/jsx-compiler.html

正如nilgun之前指出的，组件slug不应该用大括号包装。

如果您决定将其存储在变量中，请确保它以大写字母开头。

这里有一个例子：

var Home = React.createClass({
  render: function() {
    return (
      <div>
        <h3>This is an input</h3>
        <CustomComponent inputType="input" />
        <h3>This is a text area</h3>
        <CustomComponent inputType="textarea" />
      </div>
    );
  }
});
var CustomComponent = React.createClass({
  render: function() {
    // make sure this var starts with a capital letter
    var InputType = this.props.inputType;
    return <InputType />;
  }
});
React.render(<Home />, document.getElementById('container'));

这是一把正在工作的小提琴：https://jsfiddle.net/janklimo/yc3qcd0u/

如果您的意图是注入渲染的实际组件，您可以这样做，这对于测试非常方便，或者出于任何原因，您希望动态注入要渲染的组件。

var MyComponentF=function(ChildComponent){
    var MyComponent = React.createClass({
        getInitialState: function () {
            return {
            };
        },
        componentDidMount: function () {
        },
        render: function () {
            return (
                <div className="MyComponent">
                    <ChildComponent></ChildComponent>
                </div>
            );
        }
    });
    return MyComponent;
};
var OtherComponentF=function(){
    var OtherComponent = React.createClass({
        getInitialState: function () {
            return {
            };
        },
        componentDidMount: function () {
        },
        render: function () {
            return (
                <div className="OtherComponent">
                    OtherComponent
                </div>
            );
        }
    });
    return OtherComponent;
};
var AnotherComponentF=function(){
    var AnotherComponent = React.createClass({
        getInitialState: function () {
            return {
            };
        },
        componentDidMount: function () {
        },
        render: function () {
            return (
                <div className="AnotherComponent">
                    AnotherComponent
                </div>
            );
        }
    });
    return AnotherComponent;
};
$(document).ready(function () {
    var appComponent = MyComponentF(OtherComponentF());
    // OR
    var appComponent = MyComponentF(AnotherComponentF());
    // Results will differ depending on injected component.
    ReactDOM.render(React.createElement(appComponent), document.getElementById("app-container"));
});

编辑：也许您忘记在js的开头添加/** @jsx React.DOM */了？

您可以使用React.DOM，不过：

render: function() {
  return React.DOM[this.props.component.slug](null, this.props.component.value);
}

http://jsbin.com/rerehutena/2/edit?html，js，输出

我不是React专家，但我认为每个组件一开始都应该用一个特定的标签来构建。因此，它本身可以提出一个明确的目的。

我的解决方案是将导入的组件分配给一个变量（使用CapitalBase），然后渲染该变量。

示例：

import React, { Component } from 'react';
import FooComponent from './foo-component';
import BarComponent from './bar-component';
class MyComponent extends Component {
    components = {
        foo: FooComponent,
        bar: BarComponent
    };
        //this is the most important step
       const TagName = this.components.foo;
    render() {
       return <TagName />
    }
}
export default MyComponent;