Question

使用React类，当您在构造函数中具有状态时，可以直接将其继承给子组件，并使用回调从子组件继承到父组件。如何通过钩子将状态从父母转移到孩子？是useReducer还是Redux的唯一方法？

Answer 1

随着钩子的到来，将道具传递给孩子或将信息从孩子传递给父母的概念没有改变。

挂钩为您提供了一种将生命周期之类的功能和状态与功能组件一起使用的方法。

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

例如：

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

有关带钩生命周期的更多详细信息，请参考这篇文章：

ReactJS lifecycle method inside a function Component

请使用hooks FAQs

引用react docs

Answer 2

也许，您应该问自己为什么要使用继承。在许多情况下，似乎很多开发人员倾向于立即考虑使用OOP样式继承，React.js可能会建议使用组合（请参见https://reactjs.org/docs/composition-vs-inheritance.html）。

对于功能组件，合成可能是唯一的选择，这意味着您的“父”组件将渲染“子”组件，并通过子道具传递它需要传递的任何状态。

您的项目是否需要Redux，应该与composition-vs-heritanceance问题完全正交。

Answer 3

关于道具，类和功能组件（或我的同伴称其为func-comp）是相同的。

您可以在功能组件中将道具从父项传递到子项，就像处理类一样。


//Parent

const Parent = () => {

const [state, setState] = React.useState({ products: 1, isAvailable: true})

const addProduct = (data) => {
// Your function
}

return (
<Child product info={state} addProduct={addProduct} />

)

}


export default Parent

在子组件中，您通常可以按照分类的方式接收道具。


const Child = ({productInfo, addProduct}) => {
 // Do what ever you like with the props
}

干杯！

如何通过钩子在React组件之间传递状态？

3 个答案: