React — Что такое реквизит

Мы используем props в React для передачи данных от одного компонента к другому (от родительского компонента к дочернему). Реквизиты — это просто более короткий способ обозначить свойства. Они полезны, когда вы хотите, чтобы поток данных в вашем приложении был динамичным.

Пример компонента App.

function App() {
  return (
    <div className="App">

    </div>
  )
}

Теперь давайте создадим еще один компонент для примера с использованием и без использования реквизитов.

// Componente sem o uso de props - ( dados estáticos )
const SayHello = () => {
  return (
    <div>
      <p>Olá Jorge</p>
    </div>
  )
}

// Utilizando Props para torna o componente reutilizável e dinâmico
const SayHelloWithProps = (props) => {
  return (
    <div>
      <p>Olá {props.name}</p>
    </div>
  )
}

// Adicionando o SayHelloWithProps ao App
const App = () => {
  const name = 'Jorge';

  return (
    <div className="App">
      <SayHelloWithProps name={name}/>
    </div>
  )
}

При повторном использовании компонента SayHelloWithProps он получает атрибут ‘name’, который динамически вставляется в компонент, доступ предоставляется через аргумент функции, имеющей доступ к объекту props.

const SayHelloWithProps = (props) => {

  const name = { props }

  return (
    <div>
      <p>Olá {name} {props.lastName}</p>
    </div>
  )
}

Реквизиты доступны только для чтения, вы не можете присвоить новое значение, это приведет к ошибке.

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

Через реквизиты можно передавать не только данные, но и функции и при необходимости устанавливать для них значения по умолчанию.

Пример:

...
const SayHelloWithProps = ({ name = 'Desconhecido'}) => {
  return (
    <div>
      <p>Olá {name}</p>
    </div>
  )
}

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

По материалам поста — Как использовать реквизит в React

Официальная документация — Компоненты и реквизиты

См. также: Изучение React — дорожная карта!| React — Что такое JSX | React — Что такое компоненты | React — Что такое состояния

Этот пост призван помочь тем, кто начинает изучать React, а также послужить стимулом в моем изучении React при создании других постов для закрепления полученных знаний.

Следуйте за мной 🙂

Linkedin | Github