Būsenų perdavimas į antrinius komponentus React

Tarkime, kad turime produktų masyvą:

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

Tarkime, kad šis masyvas yra komponente Products. Įrašykime šiuos produktus į komponento būseną:

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

Dabar peržiūrėkime produktus ciklu ir išveskime juos kokioje nors išdėstyme:

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>;
}

Kaip matote, mūsų ciklo map turinys yra pakankamai sudėtingas, ypač jei produkto išdėstymas ateityje išsiplės. Toks sudėtingumas apsunkina kodo skaitomumą, supratimą ir priežiūrą.

Geriau būtų išskirti kodą, atsakingą už rodymą produkto, į atskirą komponentą. Pavadinkime jį Product. Štai mūsų komponento kodas:

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

Dabar komponento Products viduje cikle map naudokime antrinius 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>;
}

Kaip matote, dabar ciklo kodas supaprastėjo ir tapo labiau suprantamas. Be to, dabar už produkto rodymą atsakingas atskiras komponentas, kuriame galime kurti, o vėliau redaguoti produktų išdėstymą.

Techniškai mes gauname, kad pagrindinis komponentas turi būseną su duomenimis, o antriniai komponentai gauna šiuos duomenis kaip props'us ir atvaizduoja juos mums reikiamu būdu.

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},
];