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

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

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

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

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

App.jsx

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

main.js

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

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

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

App.jsx

main.js

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

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

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

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

App.jsx

main.js

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

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

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

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

ReactJS: основы

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

Получить

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree