Синтаксис распространения "... this.props" в reactjs кажется странным

При деструктуризации из объекта извлекаются пары ключ-значение.

Взгляните на этот пример

const obj = {
  a: 'a',
  b: 'b'
}

Теперь деструктуризация obj приведет к

const { a, b } = obj;
console.info(a);  // 'a'
console.info(b);  // 'b'

Если вы деструктурируете объект, передавая его в качестве реквизита для компонента React, вот что произойдет.

<Component {...obj} />

Это будет внутренне преобразовано в

<Component a = {a} b = {b} />

Поэтому, если вы передаете стили как свойства компонента, это следует делать как

const style = {
  background:'yellow'
} 

<Component style = {style} />

или

const obj = {
  style = {
      background:'yellow'
    } 
}

<Component {...obj} />

Этот является задокументирован в документации React здесь.

Чтобы скопировать пасту сюда, говорится:

If you already have props as an object, and you want to pass it in JSX, you can use ... as a “spread” operator to pass the whole props object.

Это совершенно правильный, документированный JSX.

Кроме того, они предоставляют пример двух различных методов передачи свойств компоненту - одного в виде дискретных атрибутов и другого в виде объекта распространения - и отмечают, что они одинаковы в том, что касается компонента, получающего реквизиты:

function App1() {
  return <Greeting firstName = "Ben" lastName = "Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

Распространяя это на приведенный выше пример, вы можете думать об этих двух как об эквивалентных:

function App1() {
    return <Text test = {1} />;
}

function App2() {
    const props = {test: 1};
    return <Text {...props} />;
}

Что касается специфики того, как это работает под капотом, помните, что это транспиляция, поэтому нам не нужно сильно беспокоиться о том, как это работает под капотом - пока вы знаете, что они эквивалент, а один - «ярлык», все должно быть в порядке.

Также стоит отметить, что в документации указывается, что подход распространения следует использовать с осторожностью, потому что «атрибуты распространения могут быть полезны, но они также позволяют легко передавать ненужные реквизиты компонентам, которые не заботятся о них, или передавать недопустимые атрибуты HTML в ДОМ ".

Надеюсь, это поможет вам прояснить ситуацию!