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

您可以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} />
  )
}

Answer 2

只需将一个对象作为具有所有所需属性的单个prop对象传递

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

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

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

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

Answer 3

将道具传递给子组件的两种方法

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

{... this}会将整个当前类的组件发送到子组件，并将接收所有变量，状态，道具和方法

您可以使用Context API将prop传递给子组件，但是我们无法与此一起发送的功能

首选第一个选项

传递很多道具来反应孩子

3 个答案: