在 React.js 组件中添加 props 作为 HTML 属性

Question

I recently started using Next.js and Tailwindcss. I want to create a custom component that can be used as follows -

<CustomComponent> Hello World </CustomComponent>

While searching for how to use this, I came across an answer which said -

const CustomComponent = props => {
  return (
    <>
      <div {...props} className="text-red-900" />
    </>
  )
}

In my example, the CustomComponent will simple make the text-color to a shade of red.

I can now use this component as <CustomComponent> Hello World </CustomComponent> .

What I don't understand is this line - <div {...props} className="text-red-900" /> . I couldn't find anything like this in the reactjs docs.

Is this an appropriate way of passing props as HTML attributes? How does it work?

Answer 1

Here are equivalent components:

const CustomComponent = (props) => {
  return <div className="text-red-900" {...props} />;
};

// props={prop1,prop2,className}
const CustomComponent = ({ ...props }) => {
  return <div className="text-red-900" {...props} />;
};

const CustomComponent = ({ prop1, prop2, className }) => {
  // className will be overridden if its valid
  return <div className="text-red-900" prop1={prop1} prop2={prop2} className={className} />;
};

Note that better to use spread syntax (for object literals) after the inline style ( className ) which makes it more generic.

As for why spreading the property is a valid syntax ?

You have a Spread Attributes explained in the docs, remember that JSX is converted to React.createElement which accepts the props as an argument.

• JSX In Depth