ReactJS如何通过props传递组件其余所有属性？

错误原因 #

• 首先是JSX传值语法错误：调用Label组件时给attributes传对象的写法不符合规范，attributes={style:{margin:"10px"}}里的对象缺少外层花括号。JSX中传递对象需要用两层花括号包裹，第一层表示传入的是JS表达式，第二层是对象本身的语法标识。
• 其次是单独封装attributes字段的写法不符合React透传属性的通用设计，灵活性低，容易出现预期外的报错。

修复方案 #

方案1：仅修复现有代码的语法问题 #

直接修改组件调用的代码，给attributes的对象加外层花括号即可正常运行：

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

方案2：改用React标准透传属性写法（推荐） #

不需要单独封装attributes字段，直接将所有额外属性作为顶层props传递，配合解构和展开运算符透传给原生标签，符合通用开发规范，易用性更高：

组件定义调整：

const Label = (props) => {
  // 解构出需要单独处理的属性，剩余所有属性全部透传给原生label
  const { children, ...rest } = props;
  return <label className="card-label" {...rest}>{children}</label>;
};

如果需要支持外部传入自定义className和内置类合并，可以调整为：

const Label = (props) => {
  const { children, className, ...rest } = props;
  // 合并内置类和外部传入的类
  const mergedClass = `card-label ${className || ''}`;
  return <label className={mergedClass} {...rest}>{children}</label>;
};

组件调用调整：

不需要再套attributes字段，直接把要传给原生label的属性作为组件props传入即可：

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

这种写法的优势：

• 所有原生label支持的属性（for、title、disabled等）都可以直接传递，不需要额外修改组件定义
• 符合React组件的通用使用习惯，没有自定义的传参规则，上手成本低
• 不需要额外处理attributes字段的边界情况，降低报错概率

内容的提问来源于stack exchange，提问作者Samben Jerald