Skip to content

Latest commit

 

History

History
62 lines (44 loc) · 2.44 KB

02.jsx-spread-attributes.md

File metadata and controls

62 lines (44 loc) · 2.44 KB

JSX Spread Attributes

Spread Attributes is a JSX feature. It’s syntactic sugar for passing all of an object’s properties as JSX attributes. The ... operator (or spread operator) is already supported for arrays in ES6. There is also a proposal to get the spread operator for object properties in ES2017.

These two examples are equivalent.

// 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}} />;

Use this to forward props to underlying components.

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

Now, I can expect FancyDiv to add the attributes it's concerned with as well as those it's not.

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

Keep in mind that order matters. If props.className is defined, it'll clobber the className defined by FancyDiv

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

We can make FancyDivs className always “win” by placing it after the spread props ({...props}).

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

You should handle these types of props gracefully. In this case, I’ll merge the author’s props.className with the className needed to style my component.

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

A word of caution

Although convenient, spread operators do increase the connascence (complexity or type of coupling) and may make debugging occur at run-time instead of before for the developer and any future maintainers. Also, it is better to use spread operators on props into components and then decontruct the object instead of blindly passing props onto React DOM Elements. This is an anti-pattern. Passing objects with undetermined contents onto React DOM Elements will increase the likelihood of invalid HTML attributes.

References:

JSX Spread Attributes