传递大量道具让孩子反应

Question

假设我将许多道具传递给子组件。目前我正在做：

function ParentComp(){
  const [state1, setState1] = useState();
  const [state2, setState2] = useState();

  function someFunction(){
    // code
  }

  const data = dataReturningFunction(state2);

  return(
    <ChildComp
      state1={state1}
      setState1={setState1}
      state2={state2}
      setState2={setState2}
      someFunction={someFunction}
      data={data}
      // etc... 
    />
  )
}

function ChildComp(props){
  // access everything with props.state1 etc...
}

我在其他孩子和父母中使用数据/代码/函数，所以不能把它全部降级给孩子。

问题是当这成为我正在传递的 10 多个属性时......很多重复我自己。

我确信有一些简单明了的东西，但我正在学习，并且无法找到更简单的方法。

Answer 1

您可以传播一个对象，如：

function ParentComp(){
  const [state1, setState1] = useState();
  const [state2, setState2] = useState();

  function someFunction(){
    // code
  }

  const data = dataReturningFunction(state2);

  const childProps = { 
     state1, 
     setState1,
     state2, 
     setState2,
     someFunction,
     data
  };

  return(
    <ChildComp {...childProps} />
  )
}

Answer 2

只需将一个对象作为单个 prop 对象传递，并包含您需要的所有属性

return(
    <ChildComp
      propsObj=
        {
          state1,
          setState1,
          sate2
          // and so on 
        }
    />
  )

然后你可以像这样直接在子组件参数中解构 props 对象

function ChildComponent ({state1,setState1,state2}){
    // ...
}

props这样在引用属性时就不必输入前缀