动态嵌套React.js组件

Question

我想创建一个可以使用React.js呈现的灵活/动态 JSX表单格式.此格式必须包含嵌套组.一个组可以包含其他组以及问题.

var Group = React.createClass({
    render: function(){
        return (
            <fieldset></fieldset>
        );
    }
});

var Text = React.createClass({
    render: function() {
        return (
            <label>
               <input type="text"/>
           </label>
        );
     }
});

React.render(
    <form>
        <Group>
           <Text/>
        </Group>
        <Text/>
    </form>,
    document.getElementById('container')
);

我想生产:

<form>
    <fieldset>
        <label>
            <input type="text">
        </label>
    </fieldset>
    <label>
        <input type="text">
    </label>
</form>

但是,<fieldset>元素未填充.输出只包含一个空<fieldset>.

我应该如何嵌套react.js组件,并仍然保持在根和嵌套级别重用问题和组组件的灵活性？

Answer 1

当您将React元素嵌套到JSX中的其他React元素中时,父元素将传递children包含子元素的prop.请参阅儿童类型道具.

另一种看待它的方法<Group><div></div></Group>是JSX相当于React.createElement(Group, null, React.createElement('div', null)),相当于React.createElement(Group, {children: React.createElement('div', null)}).

因此,在您的情况下,您的组件组件将如下所示:

var Group = React.createClass({
    render: function(){
        return (
            <fieldset>{this.props.children}</fieldset>
        );
    }
});

请注意,子道具是一个不透明的数据结构(它可能是单个元素或元素数组,具体取决于输入),因此如果您需要操作它,则应使用React.ChildrenAPI.