无法理解JSX传播运营商

Question

给出来自React文档的示例代码:

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是一个对象,传播操作符获取您传入的对象的属性并将它们应用于组件.因此,Component将具有foo值为xa bar且值为a的属性a y.

它将是相同的:

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

只是更短

Answer 2

有关object-rest-spread语法如何与react配合使用的最佳概述之一发布在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通过将它放在传播道具之后使s className始终"赢" ({...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}
  />

- 引自@chantastic的reactpatterns.com

另一个很好的概述发表在由Steven Luscher 撰写的关于ES6 +的React的babeljs博客文章中:

解构和传播属性

通常在编写组件时,我们可能希望将大部分父组件的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>
    );
  }
}

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