React - 중요한 소품

Usamos props no React para passar dados de um componente para outro(de um componente pai para um componente filho). Props é apenas uma maneira mais curta de dizer propriedades. Eles são úteis quando você deseja que o fluxo de dados em seu aplicativo seja dinâmico.

구성 요소 앱의 예입니다.

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

    </div>
  )
}

Agora vamos criar outro componente para exemplificar come sem o uso de Props.

// 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>
  )
}

Ao reutilizar o componente SayHelloWithProps esse recebe um atributo 'name' que é inserido de forma dinâmica ao componente, o acesso é dado via argumento da função que possui acesso a um objeto props.

const SayHelloWithProps = (props) => {

  const name = { props }

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

Props são somente leitura, não possível atribuir um novo valor, fazendo isso um erro é gerado.

Você pode usar a desestruturação ( no argumento da função ou no corpo da função ) isso torna o código mais limpo e fácil de entender ou acessar as propriedade com a dot notation.

É possível passar além de dados, funções via props e se necessário definir valores padrões para os mesmo.

예:

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

As Props são equivalente a argumentos de funções, aceitando variados tipos de dados e funções, use sua criatividade para criar aplicações e usar essa funcionalidade de uma forma que deixe seus componentes mais reutilizaveis.

Baseado no post - How to Use Props in React

Documentação Oficial - Componentes e Props

Veja também: | | |

Este post tem como objetivo ajudar quem esta começando no aprendizado de React, além de servir como incentivo no meus estudos de React criando outros posts pra fixação do aprendizado.

나 시감 :)

| Github