Passare valori a un component in ReactJS

di , in HTML5, React,

In ReactJS ogni component può ricevere valori in input passati dal component padre. Se usiamo un component creato tramite function, questi valori sono raggruppati in un oggetto che viene passato in input alla funzione, mentre se creiamo il component tramite classe, questi vengono passati in input al costruttore e disponibili nel component attraverso la proprietà props.

function Child(props) {
  return <div>props.fullName</div>;
}

class Child extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>{this.props.fullName}</div>;
  }
}

Nel component padre quello che dobbiamo fare è passare al component figlio la proprietà fullName semplicemente impostandola come attributo del tag del component figlio.

function Parent() {
  ...
  return <Child fullName="Stefano Mostarda" />
}

Se usiamo TypeScript, possiamo ulteriormente migliorare il codice specificando il tipo dell'oggetto che contiene le props.

interface Props {
  fullName: string;
}

function Child(props: Props) {
  return <div>props.fullName</div>;
}

class Child extends React.Component {
  constructor(props: Readonly<Props>) {
    super(props);
  }

  render() {
    return <div>this.props.fullName</div>;
  }
}

In questo modo all'interno del component Child avremo l'intellisense su props, e nel component Parent avremo l'intellisense sul tag Child.

Commenti

Visualizza/aggiungi commenti

Passare valori a un component in ReactJS (#269)
| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi