如何动态声明组件

Question

与：

this.props.components = [{component: input}, {component: button}]

在此代码中：

    var React = require('react');

var form = React.createClass({
    render: function () {
        var components = [];
        var component = null;
        //console.log(this.props.components);
        for (var i=0; i < this.props.components.length; i++) {
            console.log(this.props.components[i]);
            component = this.props.components[i].component;
            components.push(<component />);
        }
        console.log(components);
        return (
            <div>
                {components}
            </div>
        );
    }
});

module.exports = form;

我的问题是，不是呈现包含输入和按钮的 div，而是呈现两个 "component" 类型的空元素。有什么想法吗？

Answer 1

如果您已经像这样将组件传递给 form class：

<Form
    components={[
        {component: <input />},
        {component: <button></button>}]}
/>

那么你不需要像那样在 JSX 中包装 <component />，因为你已经渲染了你的组件。只要做：

for (var i = 0; i < this.props.components.length; i++) {
    component = this.props.components[i].component;
    components.push(component);
}

如何动态声明组件

How to dynamically declare components

reactjs

react-jsx