Articolo originale: How to Pass Data and Events Between Components in React
Se stai tentando di implementare operazioni CRUD utilizzando gli endpoint API, potresti scoprire che è difficile gestire i dati su più componenti.
O forse hai un modale, ma vuoi attivarlo da un componente diverso.
Capire come affrontare questi scenari può essere difficile.
In questo tutorial, ti mostrerò come puoi farlo.
Come passare i dati tra un componente padre e un componente figlio
In primo luogo, passiamo i dati tra un componente padre e un componente figlio. .
Innanzitutto, dovrai creare due componenti, un Parent e un Child.
import React from 'react'
export default function Parent() {
return (
<div>
</div>
)
}
import React from 'react'
export default function Child() {
return (
<div>
</div>
)
}
Successivamente, importerai il componente Child nel componente Parent e lo restituirai.
import React from 'react'
import Child from './Child';
export default function Parent() {
return (
<div>
<Child/>
</div>
)
}
Quindi creerai una funzione e un pulsante per attivare quella funzione. Inoltre, creerai uno stato utilizzando l'Hook useState per gestire i dati.
import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';
export default function Parent() {
const [data, setData] = useState('');
const parentToChild = () => {
setData("This is data from Parent Component to the Child Component.");
}
return (
<div className="App">
<Child/>
<div>
<Button primary onClick={() => parentToChild()}>Click Parent</Button>
</div>
</div>
)
}
Come puoi vedere qui, stiamo chiamando la funzione parentToChild sul pulsante Click Parent . Quando si fa clic sul pulsante Parent, esso memorizzerà "This is data from Parent Component to the Child Component" nella variabile data .
Passiamo ora lo stato dei dati ai nostri componenti figlio. Puoi farlo usando i props.
Passa i dati come props quando chiami il componente figlio, in questo modo:
<Child parentToChild={data}/>
Qui stiamo passando i dati nel componente figlio come data .
data
è il dato che dobbiamo trasmettere, e parentToChild
è il nome del prop.
Successivamente, è il momento di acquisire i dati nel componente figlio. Ed è molto semplice.
Qui, ci possono essere due casi.
Caso 1: se stai utilizzando un componente funzionale, prendi semplicemente parentToChild nei parametri.
import React from 'react'
export default function Child({parentToChild}) {
return (
<div>
{parentToChild}
</div>
)
}
Caso 2: se hai un componente di classe, usa semplicemente this.props.parentToChild
.
import React, { Component } from 'react'
export default class Child extends Component {
render() {
return (
<div>
{this.props.parentToChild}
</div>
)
}
}
In ogni caso, otterrai gli stessi risultati:

Quando facciamo clic sul pulsante Click Parent
, vedremo i dati come output sullo schermo.
import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';
export default function Parent() {
const [data, setData] = useState('');
const parentToChild = () => {
setData("This is data from Parent Component to the Child Component.");
}
return (
<div className="App">
<Child parentToChild={data}/>
<div className="child">
<Button primary onClick={() => parentToChild()}>Click Parent</Button>
</div>
</div>
)
}
Sopra vedrai il codice completo per Parent Component
.
Come passare i dati tra un componente figlio e un componente padre
Questo è un po' più complicato.
Innanzitutto, devi creare una funzione nel componente padre chiamata childToParent
e uno stato vuoto chiamato data
.
const [data, setData] = useState('');
const childToParent = () => {
}
Quindi, passa la funzione childToParent
come supporto al componente figlio.
<Child childToParent={childToParent}/>
Ora, nel nostro componente figlio, accetta questa chiamata di funzione come prop e assegnala a un evento onClick.
Inoltre, dichiara uno stato che contiene alcuni dati sotto forma di stringa o numero.
Passa i dati nella funzione parentToChild
come parametri.
import React from 'react'
import { Button } from 'semantic-ui-react';
export default function Child({childToParent}) {
const data = "This is data from Child Component to the Parent Component."
return (
<div>
<Button primary onClick={() => childToParent(data)}>Click Child</Button>
</div>
)
}
Successivamente, nel componente padre, accetta questi dati nella funzione childToParent
come parametro. Quindi imposta i dati usando l'hook useState.
import './App.css';
import { useState } from 'react';
import Child from './Child';
function Parent() {
const [data, setData] = useState('');
const childToParent = (childdata) => {
setData(childdata);
}
return (
<div className="App">
<div>
<Child/>
</div>
</div>
);
}
export default Parent;
Quindi, mostra quella variabile di dati nella funzione di ritorno.
import './App.css';
import { useState } from 'react';
import Child from './Child';
function Parent() {
const [data, setData] = useState('');
const childToParent = (childdata) => {
setData(childdata);
}
return (
<div className="App">
{data}
<div>
<Child childToParent={childToParent}/>
</div>
</div>
);
}
export default Parent;
I dati figlio sovrascriveranno i dati padre quando si fa clic sul pulsante Click Child
.

Ora puoi passare i dati da Child a Parent e da Parent a Child come un professionista.
Puoi anche trasmettere eventi come onClick o OnChange
Basta chiamare un metodo di avviso nella funzione childToParent
e passare quella funzione come supporto al componente figlio .
import './App.css';
import Child from './Child';
function Parent() {
const childToParent = () => {
alert("This is an alert from the Child Component")
}
return (
<div className="App">
<div className="child">
<Child childToParent={childToParent}/>
</div>
</div>
);
}
export default Parent;
E nel componente figlio , accetta la funzione childToParent
come prop. Quindi assegnalo a un evento onClick su un pulsante.
import React from 'react'
import { Button } from 'semantic-ui-react';
export default function Child({childToParent}) {
return (
<div>
<Button primary onClick={() => childToParent()}>Click Child</Button>
</div>
)
}
La tua funzione nel componente padre verrà richiamata quando fai clic sul pulsante nel componente figlio e vedrai questo avviso:

Questo è tutto!
Puoi trovare il codice su Github se vuoi ulteriormente sperimentare.
Bene, questo è tutto gente. Buon apprendimento.