react-bits:JSX扩展属性

前端之家收集整理的这篇文章主要介绍了react-bits:JSX扩展属性前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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属性

猜你在找的React相关文章