reactjs中的传播语法“...this.props”感觉很奇怪

Question

在 JSX 中使用扩展运算符对 props 之类的对象做出反应似乎无法输出我期望的结果。

<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 中。

在这里复制粘贴，它声明：

如果你已经有 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} />;
}

至于它在后台如何工作的细节，请记住这是一个转译，所以我们不需要过多关注它在后台是如何工作的——只要你知道他们是等价的，一个是“捷径”，你应该没问题。

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

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

Answer 2

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

看看这个例子

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

现在，解构obj 将导致

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

如果你在作为 React 组件的 props 传递时解构一个对象，就会发生这种情况

<Component {...obj} />

这将在内部转换为

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

因此，如果您将样式作为道具传递给组件，则应该这样做

const style = {
  background:'yellow'
} 

<Component style={style} />

或

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

<Component {...obj} />