Указать контент в компоненте (props.children)

В React можно добавить компонент с указанным контентом. Например, если для каждого диалогового окна надо сделать свою форму.

<Dialog>Форма добавления</Dialog>
<Dialog>Форма редактирования</Dialog>

Для этого в компоненте <Dialog> надо указать {this.props.children} в том месте, где будет выводиться контент.

class Dialog extends React.Component {
    render() {
        return (
            <div className="dialog">
                {this.props.children}
            </div>
        );
    }
}

Пример кода на JSFiddle

Атрибуты

Атрибуты будут работать также, как при обычном выводе компонента.

<Dialog title="Редактирование">Форма редактирования</Dialog>

Код в компоненте.

class Dialog extends React.Component {
    render() {
        return (
            <div className="dialog">
                <p>{this.props.title}</p>
                {this.props.children}
            </div>
        );
    }
}

Пример кода на JSFiddle

Комментарии

Авторизуйтесь, чтобы добавлять комментарии