Saltar al contenido principal

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.

EnglishMoji!

Проблемы?

Problem

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

JavaScript Camp

Вопросы

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

  1. prop
  2. props

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

  1. true
  2. false

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

  1. true
  2. false

Done

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

EnglishMoji!

Ссылки:

  1. React Native - official website
  2. Learn React