Stāvokļu nodošana apakškomponentēm React

Pieņemsim, ka mums ir dots produkta masīvs:

jsxconst initProds = [
  {id: id(), name: 'product1', cost: 100},
  {id: id(), name: 'product2', cost: 200},
  {id: id(), name: 'product3', cost: 300},
];

Pieņemsim, ka šis masīvs atrodas komponentē Products. Ierakstīsim šos produktus komponenta stāvoklī:

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
}

Tagad apskatīsim produktus ar ciklu un izvērsim tos kādā noformējumā:

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
  
  const items = prods.map(prod => {
    return <div key={prod.id}>
      name: <span>{prod.name}</span>,
      cost: <span>{prod.cost}</span>
    </div>;
  });
  
  return <div>
    {items}
  </div>;
}

Kā redzat, mūsu cikla map saturs ir pietiekami sarežģīts, it īpaši, ja produkta noformējums turpmāk izaugs. Šāda sarežģītība apgrūtina koda lasīšanu, izpratni un atbalstu.

Labāk būtu iznest kodu, kas atbild par attēlošanu produkta atsevišķā komponentē. Nosauksim to Product. Lūk, mūsu komponenta kods:

jsxfunction Product({ name, cost }) {
  return <div>
    name: <span>{name}</span>,
    cost: <span>{cost}</span>
  </div>;
}

Tagad komponenta Products iekšpusē ciklā map izmantosim apakškomponentus Product:

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
  
  const items = prods.map(prod => {
    return <Product
      key ={prod.id}
      name={prod.name}
      cost={prod.cost}
    />;
  });
  
  return <div>
    {items}
  </div>;
}

Kā redzat, tagad cikla kods kļuva vienkāršāks un saprotamāks. Turklāt tagad par produkta attēlošanu atbild atsevišķs komponents, kurā mēs varam veikt, un pēc tam rediģēt produktu noformējumu.

Tehniski mēs esam sasnieguši, ka vecāku komponentam ir stāvoklis ar datiem, bet apakškomponenti saņem šos datus propu veidā un attēlo tos mums vajadzīgajā veidā.

jsxconst initUsers = [
  {id: id(), name: 'user1', surname: 'surn1', age: 30},
  {id: id(), name: 'user2', surname: 'surn2', age: 31},
  {id: id(), name: 'user3', surname: 'surn3', age: 32},
];