reactjs - 如何从组件 B（功能组件）中的事件处理程序呈现组件 A？

Question

我正在通过一个简单的食物日志应用程序学习钩子。我有一个带有按钮列表的页面（每个按钮都是一种食物）。当用户单击一个按钮时，该食物会显示在页面顶部，其中包含所吃的卡路里。我使用两个函数组件：Ate 和 Food，并将食物列表和 ate 列表都保存在 localStorage 的数组中。它可以工作，但需要刷新页面。如何使用钩子从 Food 组件中的 onClick 事件处理程序呈现 Ate 组件？

这是一个代码示例：

const Home = props => {
  const ate = readAte()
  const foods = readFood()

  return (
    <div>
      <Ate ate={ate} />
      <Food food={foods} />
    </div>
  )
}

const getAte = (x, i) => {
  return <li key={i}>{x.name}</li>
}

const Ate = props => {
  const { ate } = props

  return (
    <div>
      <h2>I Ate</h2>
      {ate.map(getAte)}
    </div>
  )
}

const getFood = (food, i) => {
  return <FoodItem key={i} data={JSON.stringify(food)} name={food.name} />
}

const Food = props => {
  const { food } = props
  return (
    <div>
      <h2>Choose from the list</h2>
      <ul>{food.map(getFood)}</ul>
    </div>
  )
}

const handleFoodClick = event => {
  const ate = JSON.parse(event.target.getAttribute('data'))
  saveAte(ate)
}

const FoodItem = props => {
  const { name, data } = props
  return (
    <li>
      <button onClick={handleFoodClick} data={data}>
        {name}
      </button>
    </li>
  )
}

这是其余的代码。

谢谢！

标签： reactjsreact-hooks