javascript - 动态解构 Prop ？

Question

我目前正在为我的网络应用构建一个 AddProductPage 组件。它从其父 AddProductContainer 接收一堆 props 并且应该将这些 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};//这是伪代码

这样我认为我的代码会尽可能干净。谢谢。

Answer 1

“将所有 props 解构为单个变量的一些代码”将是简单的解构:

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

实例:

const props = {
    propsA: "a",
    propsB: "b",
    propsC: "c",
    propsD: "d",
    propsE: "e"
};

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

const comp1Props = {
    propsA,
    propsB
};

const comp2Props = {
    propsC,
    propsD,
    propsE
};

console.log(comp1Props);
console.log(comp2Props);

.as-console-wrapper {
  max-height: 100% !important;
}

---

在您已澄清的评论中:

what I meant with dynamically is to destructure everything without knowing the props names or how many props there are.

我问你如何知道分配给 comp1Props 和 comp2Props 的内容，你说:

I woud still decide that and create those objects manually. But if a pass a new prop to AddProductPage, I would like it to be automatically destructured and available to add that into the comp1Props object, for example. Otherwise I would have to remember to destructure it first and then add it to the comp1Props object.

所以问题是:您能否为 AddProductPage 中的所有 props 属性自动创建常量/变量，以便它们都可以在创建 comp1Props 和 comp2Props 的代码？

不，如果不使用在严格模式下不可用(默认情况下在模块中启用)的混淆功能(with)，您将无法做到这一点。如果您可以使用 with，您只需执行 with (props) {/*...*/} 并创建您的 comp1Props 和comp2Props 在该 block 中。但是你不能在现代 JavaScript 中使用 with。

您可能最好还是做您已经在做的事情:

const comp1Props = {
    propsA: props.propsA,
    propsB: props.propsB
};

但是如果你想让它更短，你可以给自己一个可重用的实用函数:

function pick(source, ...props) {
    const result = {};
    for (const prop of props) {
        result[prop] = source[prop];
    }
}

然后在 AddProductPage 中使用它:

function AddProductPage(props) {
  const comp1Props = pick(props, "propsA", "propsB");
  const comp2Props = pick(props, "propsC", "propsD", "propsE");

  return(
    <React.Fragment>
      <Component1 {...comp1Props}/>
      <Component2 {...comp2Porps}/>
      // And so on...
    </React.Fragment>
  );
}

(有些人会把它塞进 reduce 调用中，但没有必要。)