时间戳

首页 > 解决方案 > 如何将数据从映射对象传递到 React 中的父组件？

javascript - 如何将数据从映射对象传递到 React 中的父组件？

问题描述

我正在构建一个购物车应用程序，该应用程序将每个项目都包含为一个卡片组件。我通过映射一些虚拟对象数据来渲染这些卡片，如下所示：

const Home = () => {
  const dummyData = [
    {
      id: 1,
      title: 'tshirt',
      price: 10
    },
    {
      id: 2,
      title: 'coat',
      price: 20
    }
  ]
  
  const RenderCards = () => {
    return (
      dummyData.map(
        (d) => {
          return (
            <Card key={d.id} title={d.title} price={d.price} handleAddToCart={handleAddToCart}/>
          )
        }
      )
    )
  }
  
  const handleAddToCart = () => {
    // maybe access id and price here?
  }
  
  return (
    <>
      <RenderCards />
    </>
  )
}

和Card正在渲染的组件：

const Card = ({id, title, price}) => {
  return (
    <>
      <div key={id}>
        <p>{title}</>
        <p>{price}</>
        <button onClick={handleAddToCart}>Add to cart</button>
      </div>
    </>
  )
}

现在单击每张卡片中的按钮，我想将数据（卡片的 ID 和商品的价格）发送回父Home组件。假设点击了第二张卡片，我想访问id和pricein Home。

编辑： 也许我没有说清楚，我想在handleAddToCart功能中访问点击卡的价格和 id。

标签： javascriptreactjsreact-hooks

解决方案

您可以向下传递处理程序并让孩子将详细信息传递给它，如下所示：

items.map(item => <Item addToCart={addToCart} {...item} />)

const Item = ({ id, name, addToCart }) => 
  <div>
    {name}
    <button onClick={() => addToCart(id)}>Add to Cart</button>
  </div>

或者像这样传递一个包含值的回调：

items.map(item => <Item addToCart={() => handleAddToCart(item.id)} {...item} />)

const Item = ({ id, name, addToCart }) => 
  <div>
    {name}
    <button onClick={addToCart}>Add to Cart</button>
  </div>

推荐阅读