javascript - ReactJS 中的扩展语法 "...this.props"感觉很奇怪

Question

在 JSX 中使用扩展运算符与诸如 props 之类的对象进行 react 似乎不会输出我期望的结果。

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

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

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

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

已发出警报

1

这肯定无法编译:

<Text test: 1 />

Answer 1

这记录在React文档中 here .

要在此处复制粘贴，它指出:

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。

此外，它们还提供了将 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} />;
}

至于它在幕后如何工作的细节，请记住这是一个转译，所以我们不需要太关心它在幕后是如何工作的——只要你知道它们是等价的，并且一个是“快捷方式”，你应该没问题。

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

希望这有助于您澄清问题!