动态破坏道具？

Question

我目前正在AddProductPage为我的Web应用程序构建一个组件。它props从其父级那里收到一堆，AddProductContainer并且应该将其划分props为页面上呈现的许多较小的组件。例子：AddProductPage.jsfunction 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) {

    //Destructuring props and storing each keys in a sep varaiable  

    const { propsA, propsB, propsC, propsD, propsE } = props;   

    const comp1Props = {

        propsA,

        propsB

    };

    const comp2Props = {

        propsC,

        propsD,

        propsE

    };

    return(

        <React.Fragment>

            <Component1 {...comp1Props}/> 

            <Component2 {...comp2Porps}/>

            // And so on...

      </React.Fragment>

    );

}