reactjs - 传递大量 Prop 让 child react

Question

假设我将许多 Prop 传递给子组件。目前我正在做:

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

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

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

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

Answer 1

您可以 spread一个对象，如:

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