在 React 中将状态变量和方法传递给子组件的更简洁的方法？

Posted 2023-02-23

【中文标题】在 React 中将状态变量和方法传递给子组件的更简洁的方法？

【英文标题】：Cleaner way to pass state variables and methods to child components in React?

【发布时间】：2021-07-25 21:31:35

【问题描述】：

React 初学者，我有多个状态变量：

function ParentComp()
      const [firstName, setFirstName] = useState("")
      const [lastName, setLastName] = useState("")
      const [address, setAddress] = useState("")

      return <p>Bonjour</p>

当然，我可以像这样将它们传递给子组件：

<ChildComponent firstName = firstName setFirstName = setFirstName
                lastName = lastName setLastName = setLastName
                address = address setAddress = setAddress/>

但是我有更多的状态变量，实际上我想将它们传递给 ChildComponent 的子级。有没有办法以某种方式将它们包装在数组或对象中？我用谷歌搜索并找到了“context api”，但我想要一个对初学者更友好的解决方案。

【问题讨论】：

您可以尝试将状态设置为对象const [data, setData] = useState( firstName: '', lastName: '',)，然后将prop 传递为<Child ...data />

【参考方案1】：

如果你想将它们保持为单独的状态，你可以这样做

<ChildComponent 
  ...
      firstName, 
      lastName, 
      address, 
      setFirstName, 
      setLastName, 
      setAddress
   
 />

否则，您可以使用useReducer 更轻松地更新状态，您将获得一个包含所有状态和一个更新操作的对象。