javascript - 如何使用钩子(Hook)在 React 组件之间传递状态？

Question

对于 React 类，当您在构造函数中有状态时，您可以将其直接继承到子组件，并使用回调从子组件继承到父组件。如何使用钩子(Hook)将状态从 parent 转移到 child ？唯一的办法是useReducer还是Redux？

Answer 1

将 Prop 传递给 child 或将信息从 child 传递给 parent 的概念并没有随着钩子(Hook)的到来而改变。

Hooks 为您提供了一种使用生命周期的方法，例如功能组件和状态。

您可以使用 useState 在父级中声明您的状态，并将其作为 props 传递给子组件，就像您之前通常对类组件或功能组件所做的那样

例如:

const Parent =() => {
  const [count, setCount] = useState(0);
  return <Child count={count} setCount={setCount} />
}

const Child = ({count, setCount}) => {
  const updateCount = () => {
     setCount(prev=> prev + 1);
  }
  return (
      <div>
         <div>Count: {count}</div>
         <button type="button" onClick={updateCount}>Increment</button>
      </div>
}

您可以引用这篇文章以获取有关带钩子(Hook)的生命周期的更多详细信息:

ReactJS lifecycle method inside a function Component

请引用 React 文档 hooks FAQs