Toimita reaktiokomponentti uudelleen, kun sen rekvisiitta muuttuu

Kuvittele, että sinulla on React- ja Redux-projekti, jossa on kaksi komponenttia, vanhempi ja lapsi.

Pääkomponentti välittää joitain rekvisiitta lapsikomponentille. Kun lapsikomponentti saa nämä rekvisiitat, sen tulisi kutsua joitain Redux-toimintoja, jotka muuttavat joitain rekvisiittejä, jotka vanhemmalta välitettiin asynkronisesti.

Tässä on kaksi komponenttia:

Pääkomponentti

class Parent extends React.Component { getChilds(){ let child = []; let i = 0; for (let keys in this.props.home.data) { child[i] = (  ); i++; if (i === 6) break; } return Rows; } render(){ return ( 

I am gonna call my child

{this.getChilds()} )

Lapsikomponentti

class Child extends React.Component { componentDidMount(){ if(this.props.data.items.length === 0){ // calling an action to fill this.props.data.items array with data this.props.getData(this.props.data.id); } } getGrandSon(){ let grandSons = []; if(this.props.data.items.length > 0){ grandSons = this.props.data.items.map( item => ); } return grandSons; } render(){ return ( 

I am the child component and I will call my own child

{this.getGrandSon()} ) } }

redux-storePäivitetään asianmukaisesti, mutta lapsi Laite ei uudelleen tehdä.

ChildTietojen täyttäminen ei yleensä ole käyttäjän vastuulla . Sen sijaan sen pitäisi vastaanottaa tietoja, jotka Parent. Myös rekvisiitta päivitetään automaattisesti.

Silti voi olla hyödyllistä päivittää ja manipuloida Childkomponentin tietoja, varsinkin kun Redux on mukana.

React is todennäköisesti suorittaa matalia vertailuja, eikä se välttämättä tuota uudelleen, vaikka tila muuttuisi selvästi.

Voit kiertää tämän tekemällä mapStateToProps:

const mapStateToProps = state => { return { id: state.data.id, items: state.data.items } }