React Props

Как использовать props для передачи данных вашим компонентам React

Props - это то, как компоненты получают свои свойства. Начиная с верхнего компонента, каждый дочерний компонент получает свои реквизиты от родителя. В функциональном компоненте свойства - это все, что ему передается, и они доступны путем добавленияpropsв качестве аргумента функции:

const BlogPostExcerpt = props => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  )
}

В компоненте класса свойства передаются по умолчанию. Ничего особенного добавлять не нужно, они доступны какthis.propsв экземпляре Component.

import React, { Component } from 'react'

class BlogPostExcerpt extends Component {
render() {
return (
<div>
<h1>{this.props.title}</h1>
<p>{this.props.description}</p>
</div>
)
}
}

Передача свойств дочерним компонентам - отличный способ передать значения в вашем приложении. Компонент либо хранит данные (имеет состояние), либо получает данные через свои свойства.

Это усложняется, когда:

  • вам нужно получить доступ к состоянию компонента от дочернего элемента, который находится на несколько уровней ниже (все предыдущие дочерние элементы должны действовать как сквозные, даже если им не нужно знать состояние, что усложняет ситуацию)
  • вам нужно получить доступ к состоянию компонента из совершенно несвязанного компонента.

Значения по умолчанию для реквизита

Если какое-либо значение не требуется, нам нужно указать для него значение по умолчанию, если оно отсутствует при инициализации компонента.

BlogPostExcerpt.propTypes = {
  title: PropTypes.string,
  description: PropTypes.string
}

BlogPostExcerpt.defaultProps = {
title: ‘’,
description: ‘’
}

Некоторые инструменты, такие какESLintиметь возможность принудительно определять свойства defaultProps для компонента с некоторыми типами propTypes, которые явно не требуются.

Как передаются реквизиты

При инициализации компонента передайте реквизиты аналогично атрибутам HTML:

const desc = 'A description'
//...
<BlogPostExcerpt title="A blog post" description={desc} />

Мы передали заголовок в виде простой строки (что-то, что мы можемТолькоделать со строками!) и описание как переменную.

Дети

Специальная опора - этоchildren. Он содержит значение всего, что передается вbodyкомпонента, например:

<BlogPostExcerpt title="A blog post" description="{desc}">
  Something
</BlogPostExcerpt>

В этом случае внутриBlogPostExcerptмы могли получить доступ к «Что-то», посмотрев вверхthis.props.children.

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

Скачать мою бесплатнуюСправочник по React


Больше руководств по реакции:


Tech Wiki Online!