React-те дочерние компоненттерге стейттерді беру

Бізде продуктілер массиві берілген делік:

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

Бұл массив Products компонентінде орналассады. Осы продуктілерді компонент күйіне жазайық:

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

Енді продуктілерді циклмен айналып шығып, оларды қандай да бір версткада шығарайық:

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

Көріп тұрғаныңыздай, біздің map циклінің мазмұны жеткілікті күрделі, әсіресе егер продукт версткасы болашақта өссе. Мұндай күрделілік кодты оқуды, түсінуді және қолдауды қиындатады.

Продуктты көрсетуге жауап беретін кодты бөлек компонентке шығару жақсы болар еді. Оны Product деп атайық. Біздің компонент коды:

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

Енді Products компонентінің ішінде map циклінде дочерние 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>;
}

Көріп тұрғаныңыздай, енді цикл коды жеңілдеді және түсінуге ыңғайлы болды. Сонымен қатар, енді продуктты көрсетуге бөлек компонент жауап береді, онда біз продуктілердің версткасын жасай аламыз, содан кейін өңдей аламыз.

Техникалық тұрғыдан бізде ата-компонентте деректері бар стейт бар, ал дочерние компоненттер бұл деректерді пропс түрінде алып, оларды бізге қажетті тәсілмен көрсетеді.

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