Содержание
Продолжим рассматривать простые примеры с 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.