Menghantar State ke Komponen Anak dalam React

Katakan kita mempunyai array produk:

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

Katakan array ini terletak dalam komponen Products. Mari simpan produk-produk ini dalam state komponen:

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

Sekarang mari kita ulangi produk-produk dengan gelung dan paparkan mereka dalam beberapa markup:

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

Seperti yang anda lihat, kandungan gelung map kami cukup kompleks, terutamanya jika markup produk berkembang pada masa hadapan. Kerumitan sedemikian menyukarkan pembacaan, pemahaman dan penyenggaraan kod.

Adalah lebih baik untuk mengasingkan kod yang bertanggungjawab untuk memaparkan produk ke dalam komponen berasingan. Mari namakannya Product. Berikut adalah kod komponen kami:

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

Sekarang mari dalam komponen Products dalam gelung map kita gunakan komponen anak 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>;
}

Seperti yang anda lihat, kini kod gelung telah dipermudahkan dan menjadi lebih mudah difahami. Selain itu, kini paparan produk diurus oleh komponen berasingan, di mana kita boleh membuat, dan kemudian menyunting markup produk.

Dari segi teknikal, kita mempunyai situasi di mana komponen ibu bapa mempunyai state dengan data, dan komponen anak menerima data ini dalam bentuk props dan memaparkannya dengan cara yang kita kehendaki.

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