动态嵌套 React.js 个组件

Question

我想创建一个可以使用 React.js 呈现的 flexible/dynamic 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。参见 Type of the Children props。

另一种看待它的方式是 <Group><div></div></Group> 是等同于 React.createElement(Group, null, React.createElement('div', null)) 的 JSX，后者又等同于 React.createElement(Group, {children: React.createElement('div', null)}).

因此在您的情况下，您的组组件将如下所示：

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

请注意，children props 是一个不透明的数据结构（它可能是单个元素或元素数组，具体取决于输入），因此如果您需要操作它，您应该使用 React.Children API.

Answer 2

如果其他人在调试时也遇到了问题，以防万一投票最多的答案对他们不起作用，docs 会说 User defined components must be capitalized.
因此，在您的情况下，如果您将 fieldset 控制器导入为 Fieldset，一切都应该正常工作。

动态嵌套 React.js 个组件

Dynamically nesting React.js components

reactjs