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

【问题标题】：Cleaner way to pass state variables and methods to child components in React?在 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} />

标签： javascript reactjs react-hooks components

【解决方案1】：

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

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

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

【讨论】：