动态破坏道具？

Question

我目前正在AddProductPage为我的Web应用程序构建一个组件。它props从其父级那里收到一堆，AddProductContainer并且应该将其划分props为页面上呈现的许多较小的组件。

例子：

AddProductPage.js

function AddProductPage(props) {

  return(

    <React.Fragment>

      <Component1

        propsA={props.propsA}

        propsB={props.propsB}

      />

      <Component2

        propsC={props.propsC}

        propsD={props.propsD}

        propsE={props.propsE}

      />

      // And so on...

    </React.Fragment>

  );

}

我已经决定将整个props对象分成较小的对象，每个组件一个，这样我就可以更清晰地看到代码在页面上呈现的内容。喜欢：

function AddProductPage(props) {

  const comp1Props = {

    propsA: props.propsA,

    propsB: props.propsB

  }

  const comp2Props = {

    propsC: props.propsC,

    propsD: props.propsD,

    propsE: props.propsE

  }

  return(

    <React.Fragment>

      <Component1 {...comp1Props}/>    // <--- Easier to see what will render

      <Component2 {...comp2Porps}/>

      // And so on...

    </React.Fragment>

  );

}

我目前正在考虑是否有可能将所有动态props分解（或其他方法）分解为单个变量，因此我可以编写如下内容：

function AddProductPage(props) {

  // Some code to destructure all props into single variables

  const comp1Props = {

    propsA,

    propsB

  };

  const comp2Props = {

    propsC,

    propsD,

    propsE

  };

  return(

    <React.Fragment>

      <Component1 {...comp1Props}/>    // <--- Easier to see what will render

      <Component2 {...comp2Porps}/>

      // And so on...

    </React.Fragment>

  );

}

我怎样才能做到这一点？

编辑

我想我对这个问题还不够清楚。但是，我的意思是动态地分解所有内容，而无需知道props名称或名称props。是否可以？

喜欢：

const {...props} = {...props};   // This is pseudo code

这样，我认为我的代码将尽可能地干净。谢谢。

Answer 1

你可以做类似的事情function AddProductPage(props) {&nbsp; &nbsp; //Destructuring props and storing each keys in a sep varaiable&nbsp;&nbsp;&nbsp; &nbsp; const { propsA, propsB, propsC, propsD, propsE } = props;&nbsp; &nbsp;&nbsp; &nbsp; const comp1Props = {&nbsp; &nbsp; &nbsp; &nbsp; propsA,&nbsp; &nbsp; &nbsp; &nbsp; propsB&nbsp; &nbsp; };&nbsp; &nbsp; const comp2Props = {&nbsp; &nbsp; &nbsp; &nbsp; propsC,&nbsp; &nbsp; &nbsp; &nbsp; propsD,&nbsp; &nbsp; &nbsp; &nbsp; propsE&nbsp; &nbsp; };&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; <React.Fragment>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Component1 {...comp1Props}/>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Component2 {...comp2Porps}/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // And so on...&nbsp; &nbsp; &nbsp; </React.Fragment>&nbsp; &nbsp; );}