Reactjs 中的扩展语法“...this.props”感觉很奇怪

使用扩展运算符与诸如此类的对象发生反应propsJSX 中似乎没有输出我所期望的内容。

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

似乎被渲染成style="foo"，它应该在哪里style:"foo" as 记录在这里 https://gist.github.com/sebmarkbage/07bbe37bc42b6d4aef81。我在任何地方都找不到这个记录。我对 React 完全陌生，我正在尝试理解其语法，并想知道 React 是否在内部做了类似这样的未记录的事情。

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

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

alerted

1

这肯定不会编译：

<Text test: 1 />

This is记录在 React 文档中here https://reactjs.org/docs/jsx-in-depth.html#spread-attributes.

要复制粘贴到此处，它指出：

如果您已经将 props 作为对象，并且想要在 JSX 中传递它，则可以使用 ... 作为“扩展”运算符来传递整个 props 对象。

它是完全有效的、有记录的 JSX。

此外，它们提供了将 props 传递给组件的两种不同方法的示例——一种作为离散属性，一种作为扩展对象——并注意，就接收 props 的组件而言，它们是相同的：

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

至于它在引擎盖下如何工作的具体细节，请记住这是一个转译，所以我们不需要太关心它在引擎盖下是如何工作的——只要你知道它们是等价的，一个是“捷径”，你应该没问题。

另外值得注意的是，文档指定应谨慎使用传播方法，因为“传播属性可能很有用，但它们也可以轻松地将不必要的 props 传递给不关心它们的组件，或者将无效的 HTML 属性传递给多姆。”

希望这有助于您澄清事情！