Question

给出来自React docs的示例代码：

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

我做了一些调查...props实际评估的内容，这是：

React.__spread({}, props)

反过来评估为{foo: x, bar: y}。

但我想知道的是，为什么我不能这样做：

var component = <Component props />;

我不明白传播运营商的意义是什么。

Answer 1

这有助于使代码更简洁 - 由于props是一个对象，传播运算符获取传入的对象的属性并将它们应用于组件。因此，组件的属性为foo，其值为x，而bar的属性值为y。

它将与：

相同

var component = <Component foo={props.foo} bar={props.bar} />;

更短

Answer 2

对象 - 休息传播语法如何与反应一起使用的最佳概述之一发布在reactpatterns.com：

JSX传播属性

Spread Attributes是一个JSX功能。它是将所有对象的属性作为JSX属性传递的语法糖。

这两个例子是等效的。
// props written as attributes
<main className="main" role="main">{children}</main>

// props "spread" from object
<main {...{className: "main", role: "main", children}} />
使用此功能将props转发给基础组件。
const FancyDiv = props =>
  <div className="fancy" {...props} />
现在，我可以期待FancyDiv添加与其相关的属性以及不属于它的属性。
<FancyDiv data-id="my-fancy-div">So Fancy</FancyDiv>

// output: <div className="fancy" data-id="my-fancy-div">So Fancy</div>
请记住，订单很重要。如果定义了props.className，它会破坏className定义的FancyDiv
<FancyDiv className="my-fancy-div" />

// output: <div className="my-fancy-div"></div>
我们可以使FancyDiv的className始终＆＃34;赢得＆＃34;将它放在传播道具({...props})之后。
// my `className` clobbers your `className`
const FancyDiv = props =>
  <div {...props} className="fancy" />
你应该优雅地处理这些类型的道具。在这种情况下，我会将作者props.className与我的组件样式所需的className合并。
const FancyDiv = ({ className, ...props }) =>
  <div
    className={["fancy", className].join(' ')}
    {...props}
  />

- reactpatterns.com引用@chantastic

Steven Luscher在babeljs博客文章React on ES6+上发表了另一篇精彩的概述：

Destructuring＆amp;传播属性

通常在编写组件时，我们可能希望将大部分父组件的props传递给子组件，但不是所有组件。在将ES6 +解构与JSX扩展属性相结合时，没有仪式就可以实现这一点：
class AutoloadingPostsGrid extends React.Component {
  render() {
    const {
      className,
      ...others  // contains all properties of this.props except for className
    } = this.props;
    return (
      <div className={className}>
        <PostsGrid {...others} />
        <button onClick={this.handleLoadMoreClick}>Load more</button>
      </div>
    );
  }
}

- 引自"BabelJS.org blog - React on ES6+"的Steven Luscher

无法理解JSX传播运营商

2 个答案:

JSX传播属性

Destructuring＆amp;传播属性