react-bits
原文

扩展属性是JSX的一个特性，是把所有对象属性传递给JSX属性的语法糖。…运算符已经被ES6的数组支持，ES2017对象也被建议支持。

下面的两个例子是等价的：

// props written as attributes
let main = () => <main className=@H_404_9@"main" role=@H_404_9@"main">{children}</main>;

// props @H_404_9@"spread" from object
// Note: `children` key is used to populate the component children.
let main = () => <main {...{className: @H_404_9@"main",role: @H_404_9@"main",children}} />;

把…用到组件的props上：

let FancyDiv = (props) => <div className=@H_404_9@"fancy" {...props} />;

给FancyDiv添加其他属性

let FancyDiv = () => <FancyDiv data-id="my-fancy-div">So Fancy</FancyDiv>;
// output: <div className="fancy" data-id="my-fancy-div">So Fancy</div>

注意重复定义属性的优先级，FancyDiv定义的属性会覆盖组件内的

let FancyDiv = () => <FancyDiv className=@H_404_9@"my-fancy-div"/>;
// output: <div className=@H_404_9@"my-fancy-div"></div>

也可以把{…props}放到FancyDivs className 之前来确保组件内className优先

// my `className` clobbers your `className` const FancyDiv = props =>
  <div {...props} className=@H_404_9@"fancy"/>;

还有更优雅的处理方式，合并props.className和”fancy”

const FancyDiv = ({ className,...props }) => (
  <div
    className={[@H_404_9@"fancy",className].join(@H_404_9@' ')}
    {...props}
  />
);

注意： …增加了耦合，但还是推荐使用…而不是盲目绑定props到dom上，传递对象具有不确定内容到DOM上可能导致无效的html属性。