在 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

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

看看这个例子

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

因此，如果您将样式作为 props 传递给组件，则应按以下方式完成

const style = {
  background:'yellow'
} 

<Component style={style} />

或

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

<Component {...obj} />

Answer 2

这是在 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} />;
}

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

还值得注意的是，文档指定应谨慎使用传播方法，因为 "spread attributes can be useful but they also make it easy to pass unnecessary props to components that don’t care about them or to pass invalid HTML attributes to the DOM."

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

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

spread syntax "...this.props" in reactjs feels odd

javascript

reactjs

spread-syntax