ReactJS — Обзор свойств компонента

ReactJS — Обзор свойств компонента

От автора: основное различие между состоянием и свойством заключается в том, что свойства компонента неизменны. Вот почему компонент контейнера должен определять состояние, которое может быть обновлено и изменено, тогда как дочерние компоненты должны передавать данные из состояния только с помощью свойства.

Использование свойства

Когда нам нужны в компоненте неизменные данные, мы можем просто добавить свойство в функцию reactDOM.render() в файле main.js и использовать его внутри компонента.

App.jsx

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

main.js

Это приведет к следующему результату.

Свойства по умолчанию

Вы также можете установить значения свойств по умолчанию непосредственно в конструкторе компонента, а не добавлять их в элемент reactDom.render().

App.jsx

main.js

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

В результате мы получим то же, что и раньше.

Свойство и состояние

В следующем примере показано, как объединить состояние и свойство в приложении. Мы устанавливаем состояние в родительском компоненте и передаем его по дереву компонентов с помощью свойства. Внутри функции рендеринга мы устанавливаем headerProp и contentProp, используемые в дочерних компонентах.

App.jsx

main.js

Результат снова будет таким же, как и в предыдущих двух примерах, единственное, что отличается — это источник наших данных, который изначально исходит от состояния. Когда мы хотим его обновить, нам просто нужно обновить состояние, и все дочерние компоненты будут обновлены. Подробнее об этом в главе «События».

Источник: //www.tutorialspoint.com/

Редакция: Команда webformyself.

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте: