Перейти к основному содержимому

Props - параметры

Большинство компонентов можно настроить при их создании с различными параметрами. Эти параметры создания называются - props.

Ваши собственные компоненты также могут использовать props. Это позволяет вам создать один компонент, который будет использоваться во многих разных местах вашего приложения, с немного разными свойствами в каждом месте. Чтобы получить их значения, обратитесь к props.YOUR_PROP_NAME в ваших функциональных компонентах или this.props.YOUR_PROP_NAME в ваших компонентах класса. Вот пример:

Использование name в качестве props позволяет нам настроить компонент приветствия, чтобы мы могли повторно использовать этот компонент для каждого из наших приветствий. В этом примере также используется компонент HelloWorld в JSX. Способность делать это - вот что делает React таким крутым.

Только для чтения#

Компонент, объявленный как функция или класс, никогда не должен модифицировать свои свойства props. Рассмотрим эту sum функцию:

const sum = (a, b) => a + b

Такие функции называются "чистыми". Потому что они не изменяют свои аргументы и всегда возвращают одинаковый результат для одних и тех же аргументов.

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

const count => (account, amount) => account += amount

React является очень гибким, но он имеет одно строгое правило:

tip

Все React-компоненты должны работать как чистые функции в отношении своих свойств props.

Проблемы?#

Problem

Пишите в Discord или телеграмм чат, а также подписывайтесь на наши новости

JavaScript Camp

Вопросы#

Как называются параметры создания компонента?

  1. prop
  2. props

Компонент, объявленный как функция или класс, никогда не должен модифицировать свои свойства props?

  1. true
  2. false

Все React-компоненты должны работать как чистые функции в отношении своих свойств props?

  1. true
  2. false

Done ✅#

Чтобы узнать, насколько хорошо вы усвоили этот урок, пройдите тест в мобильном приложении нашей школы по этой теме или в боте Telegram.

Sumerian school

Ссылки:#

  1. React Native - official website
  2. Learn React

Become a Patron!