Guide React Props da Parent a Child

소개

In questa semplice quida vi guiderò passo dopo passo all' utilizzo di props per il passaggio di valori da un componente all'altro. Nella guida vedremo come si passano i valori dal componente genitore al figlio.

Passiamo i 소품 알 차일드

Il termine props non-significa altro che proprietà . Ipotizziamo che vogliamo passare dei valori dal componente parentVideoteca.js al componente childFilm.js .
Scriveremo in da Videoteca.js in <Film /> gli attributi che vogliamo passare:

티톨로

제네레

데이터

Ed impostiamo ad ogniuno il corrispettivo valore:

import React from 'react';
import Film from './Film';
import './style.css';

export default function Videoteca() {
  return (
    <div>
      <h1 class="text-center">Videoteca</h1>
      <div classname="container-film">
        <Film titolo="Godzilla" genere="Azione" data="2012" />
      </div>
    </div>
  );
}

Prendiamo i props dal Parent

Ora andiamo nel nostro componente child Film.js e impostiamo un argomento di nome props (la scelto del nome è a vostro piacimento, ma consiglio di scrivere props per una maggiore chiarezza).
Per accedere al titolo ci basterà scrivere props.title e per visualizzarlo nel componente ci basterà inserirlo tra parentesi graffe:

import React from 'react';
import './style.css';

export default function Film(props) {
  return (
    <div class="film">
      <h3>{props.titolo}</h3>
    </div>
  );
}

셈플리체, 아니? Possiamo 요금 lo stesso con genere e data . Inoltre nulla ci vieta di farlo con altri componenti Film.js:

솜마리오

Se non vi è ancora chiaro immaginate props come una scatola. Quando andiamo a inserire gli attributi HTML dal parent al nostro child immaginate che riempiamo la "scatola props"con quegli attributi e li passiamo al componente dove li abbiamo scritti. Fatto questo ci basterà scrivere props.nome-attributo nel child per farli "uscire dalla scatola".
(Non prendere questa come definizione, è solo un esempio per farvi capire il concetto).


Spero questa mini guida vi sia piaciuta , thinka di mettere ❤️ al post e seguirmi sui miei 사회적:

GitHub