react-bits：JSX扩展属性

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

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

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

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

把…用到组件的props上：

let FancyDiv = (props) => <div className="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="my-fancy-div"/>;
// output: <div className="my-fancy-div"></div>

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

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

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

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

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

react-bits：JSX扩展属性

相关文章