Будучи новичком в мире React, я хочу глубоко понять, что происходит, когда я использую, {this.props.children}
и в каких ситуациях можно использовать то же самое. Насколько это актуально в приведенном ниже фрагменте кода?
render() {
if (this.props.appLoaded) {
return (
<div>
<Header
appName={this.props.appName}
currentUser={this.props.currentUser}
/>
{this.props.children}
</div>
);
}
}
Ответы:
Ссылка: краткое введение в props.children React
источник
Я предполагаю, что вы видите это в
render
методе компонента React , например (отредактируйте: ваш отредактированный вопрос действительно показывает это) :children
- это специальное свойство компонентов React, которое содержит любые дочерние элементы, определенные внутри компонента, например,divs
внутриExample
выше.{this.props.children}
включает эти дочерние элементы в визуализированный результат.Вы бы сделали это, когда захотите напрямую включить дочерние элементы в визуализированный вывод без изменений; и нет, если вы этого не сделали.
источник
render
, но это были бы одни и те же дети во всех случаях. Принимая дочерние элементы (при необходимости), каждый экземпляр вашего компонента может иметь разное содержимое. Я обновил пример в ответе.props.children
представляет содержимое между открывающим и закрывающим тегами при вызове / рендеринге компонента:вызов / вызов / рендеринг
Foo
:источник