如何在道具中传递所有其他属性 - ReactJS

Question

const Label = (props) => {
  return <label className={"card-label"} {...props.attributes}>{props.children}</label>;
};

If I try to access the attributes in other functions. I'm getting errors and unable to proceed

<Label attributes={style:{margin:"10px"}}>Select Tip %</Label>

Does anyone know the answer? How do I pass all other attributes of any component with props?

Answer 1

You are destructuring attributes values directly to the component, so each attributes key is going to be considered as a prop. On the second code, you are trying to access the attributes prop which won't be existed.

You should put your attributes value into attributes prop:

return <label className={"card-label"} attributes={props.attributes}>{props.children}</label>;

A more readable way is to extract attributes from props directly:

const Label = ({ attributes, children }) => {
  return <label className={"card-label"} attributes={attributes}>{children}</label>;
};

Answer 2

I guess you have a issue with the syntax of passing props to Label component.Try with this

const Label = (props) => {
    return <label className={"card-label"} {...props.attributes}>{props.children}</label>;
  };

  return <Label attributes={{style:{margin:"50px"}}}>Select Tip %</Label>;