Продолжим рассматривать простые примеры с React.js, начало см. в предыдущей статье.
Компонент верхнего уровня в React.js
Основное понятие, используемое в этой статье:
Props — это произвольные входные данные (или «пропсы»).
В предпоследнем примере мы рендерили сразу 2 элемента: кнопку со счетчиком и поле <P> со счетчиком сверху. На самом деле, это один из распространенных способов рендеринга нескольких элементов:
ReactDOM.render (
<div>
<p>Вы кликнули {this.state.count} раз(а)</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Кнопка {<br/>}Меня тыцнули {this.state.count} раз(а)
</button>
</div>
mountNode
);
Мы просто делаем выводимые элементы вложенными в родительский элемент, например, <DIV>. В React.js есть специальный объект, если вам нужно заключить несколько соседних элементов, например, без введения нового родительского узла DOM. Вы можете использовать React.Fragment:
ReactDOM.render (
<React.Fragment>
<Button />
<Display />
</React.Fragment> ,
mountNode
);
Этот случай настолько распространен в React, что расширение JSX имеет ярлык для него. Вместо того, чтобы печатать React.Fragment, вы можете просто использовать пустой тег <></>:
ReactDOM.render (
<>
<Button />
<Display />
</> ,
mountNode
);
Теперь создадим пример, в котором будет один элемент верхнего уровня, имеющий состояние, которое будет передаваться в элементы нижнего уровня для управления ими. Для этого удалим элемент состояния из <Button> и создадим новый компонент верхнего уровня CountManager, который и будет элементом состояния. Схема работы кода будет такая: верхний элемент CountManager хранит состояние, компонент Display будет его отображать, а обновлять его будет компонент Button.