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

Question

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

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

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

Answer 1

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

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

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