Динамическое разрушение реквизита?

«Некоторый код для деструктуризации всех реквизитов в отдельные переменные» будет простой деструктуризацией:

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.info(comp1Props);
console.info(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.

Итак, вопрос: можете ли вы автоматически создавать константы/переменные для всех свойств props в AddProductPage, чтобы все они были доступны для использования в коде, создающем comp1Props и comp2Props?

Нет, вы не можете сделать это, не используя запутанную функцию (with), которая недоступна в строгом режиме (который включен по умолчанию в модулях). Если бы вы могли использовать with, вы бы просто сделали with (props) { /*...*/ } и создали свои comp1Props и 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, но в этом нет необходимости.)

вы можете сделать что-то вроде

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

}

Вы можете использовать:

function AddProductPage({propsA, propsB, propsC, propsD, propsE}) {

Или

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

Я немного опоздал на вечеринку, но я хотел бы упомянуть, как сделать ваш код читабельным и, следовательно, удобным для сопровождения. Вы должны отделить свой код и, таким образом, разделить свои проблемы.

Лично я думаю, что вы думаете, что слишком много для того, что вам нужно. Для каждого Component1, Component2, Component3 и т. д. вы будете объявлять другое значение const, которое в зависимости от того, сколько у вас есть, будет влиять на производительность. Что еще более важно, у вас есть компонент и передаваемые реквизиты, как показано ниже (не встроенные в компонент), что делает его намного чище.

class MyComponentName extends Component {
  getComponentOne = () => {
    const { propsA, propsB } = this.props;

    //Any other logic for component 1 can go here.

    return (
      <Component1
        propsA = {propsA}
        propsB = {propsB}
      />
    );
  };

  getComponentTwo = () => {
    const { propsC, propsD, propsE} = this.props;

    //Any other logic for component 2 can go here.

    return (
      <Component2
        propsC = {propsC}
        propsD = {propsD}
        propsE = {propsE}
      />
    );
  };

  // Other component method getters

  addProductPage = () => (
    <React.Fragment>
      {this.getComponentOne()}
      {this.getComponentTwo()}
      // Get other component methods
    </React.Fragment>
  );

  render() {
    return(
      // Return whatever you wish here.
    );
  }
}

export default MyComponentName;

Две замечательные цитаты, над которыми стоит задуматься, принадлежат К. Мартину, который он написал в своей книге «Чистый код: руководство по Agile Software Craftsmanship»:

Even bad code can function. But if code isn’t clean, it can bring a development organization to its knees. Every year, countless hours and significant resources are lost because of poorly written code. But it doesn’t have to be that way.

А ТАКЖЕ

“Clean code is code that has been taken care of. Someone has taken the time to keep it simple and orderly. They have paid appropriate attention to details. They have cared.”

Также примечание относительно моего примера выше: я использую компоненты класса, так как не знаю, есть ли у вашего компонента какие-либо другие методы/логика. Как будто у вас есть другие методы в вашем функциональном компоненте, при каждом рендеринге эти методы будут повторно инициироваться, что опять же будет большой проблемой производительности.

Если у вас просто есть функциональный компонент и вы не хотите отделять свой код/не имеет логики и возвращает только JSX, то вы можете сделать это следующим образом.

const MyComponentName = ({
  propA,
  propB,
  propC,
  propD,
  propE,
  // Rest of props
}) => (
  <React.Fragment>
    <Component1
      propsA = {propsA}
      propsB = {propsB}
    />
    <Component2
      propsC = {propsC}
      propsD = {propsD}
      propsE = {propsE}
    />
    // Rest of you components (If simply returning JSX)
  </React.Fragment>
);

Надеюсь, вышеизложенное вам чем-то поможет.