Динамическое вложение компонентов React.js

Я хотел бы создать формат формы гибкий/динамический JSX, который можно визуализировать с помощью React.js. Этот формат должен включать вложенные группы. Группа может содержать другие группы, а также вопросы.

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 и сохранять гибкость повторного использования компонентов вопросов и групп на корневом и вложенном уровнях?

Ответы

Ответ 1

Когда вы вставляете элементы React в другие элементы React в JSX, родительский элемент получает символ children, который содержит дочерние элементы. См. Тип реквизита для детей.

Другим способом взглянуть на это является то, что <Group><div></div></Group> является эквивалентом JSX для React.createElement(Group, null, React.createElement('div', null)), который в свою очередь эквивалентен React.createElement(Group, {children: React.createElement('div', null)}).

Итак, в вашем случае компонент Group будет выглядеть так:

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

Обратите внимание, что реквизиты для детей представляют собой непрозрачную структуру данных (это может быть отдельный элемент или массив элементов в зависимости от ввода), поэтому, если вам когда-либо понадобится манипулировать им, вы должны использовать React.Children.

Ответ 2

Если у кого-то еще есть проблемы с отладкой через это, и на всякий случай, если верхний проголосовавший ответ не работает для них, docs говорят, что User defined components must be capitalized.
Поэтому в вашем случае, если вы импортируете свой контроллер fieldset как fieldset вместо этого, все должно работать нормально.