reactjs中的扩展语法"...this.props"感觉很奇怪

Question

在JSX中使用spread操作符react处理props之类的对象似乎无法输出我所期望的结果。

<Text {...this.props} />

似乎被渲染为style=“foo”，其中应该是style:“foo”，如本文所述。我在任何地方都找不到这个文件。我对react完全是新手，我试图理解它的语法，想知道react是否在内部做了类似这样的未记录的事情。

一个简单的测试突显了我的困惑：

const x = {...{test:1}}.test;
alert(x);

警报了

1.

这肯定不会编译：

<Text test: 1 />

Answer 1

解构从对象中提取键值对。

看看这个例子

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

现在，解构obj将导致

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

如果您在将对象作为React Component的道具传递时对其进行了重构，则会发生以下情况

<Component {...obj} />

这将在内部转换为

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

因此，如果要将样式作为道具传递给组件，则应按照以下步骤进行传递：

const style = {
  background:'yellow'
} 

<Component style={style} />

或

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

<Component {...obj} />

Answer 2

这记录在React留档中。

要在此处复制粘贴，它会声明：

如果您已经有道具作为对象，并且您想在JSX中传递它，您可以使用...作为“传播”运算符来传递整个道具对象。

它是完全有效的，有文档记录的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属性传递给DOM。”

希望这有助于澄清你的问题！