时间戳

首页 > 解决方案 > 动态解构道具？

javascript - 动态解构道具？

问题描述

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

例子：

添加ProductPage.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

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

标签： javascriptreactjs

解决方案

“将所有道具解构为单个变量的一些代码”将是简单的解构：

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

在评论中你已经澄清：

我动态的意思是在不知道道具名称或道具数量的情况下解构一切。

我问你怎么知道分配给comp1Propsvs什么comp2Props，你说：

我仍然会决定并手动创建这些对象。但是，如果将新道具传递给AddProductPage，例如，我希望它能够自动解构并可以将其添加到 comp1Props 对象中。否则我必须记得先解构它，然后将它添加到comp1Props对象中。

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

不，如果不使用with在严格模式下不可用的令人困惑的功能 ( )（默认情况下在模块中启用），您将无法做到这一点。如果您可以使用with，您只需在该块内with (props) { /*...*/ }创建并创建您的comp1Propsand 。comp2Props但是你不能with在现代 JavaScript 中使用。

你可能最好做你已经在做的事情：

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电话里，但没有必要。）

推荐阅读