请求解析React中Attributes与Props的区别及示例说明

一、Props：组件的“输入数据” #

Props是React组件之间传递的自定义数据，属于组件层面的“输入参数”，完全由开发者定义和控制，用于支撑组件的内部逻辑渲染或行为控制。

示例1：自定义组件接收Props

// 自定义Button组件，接收自定义props
function Button({ label, onClick }) {
  // 使用props渲染内容、绑定事件
  return <button onClick={onClick}>{label}</button>;
}

// 父组件向子组件传递props
function App() {
  return <Button label="提交表单" onClick={() => alert('提交成功')} />;
}

这里的label和onClick是典型的Props——它们不是DOM元素的原生属性（尽管onClick最终会映射到DOM事件，但此处是作为组件参数传递的），是为了让Button组件具备复用性而定义的自定义数据。

二、Attributes：DOM元素的原生属性 #

Attributes是HTML元素自带的原生属性（比如id、class、src、disabled等），属于浏览器DOM层面的概念，用于控制原生元素的固有行为或样式。

示例2：给DOM元素设置Attributes

function App() {
  // id、className、disabled都是DOM原生attributes
  return <button id="submit-btn" className="primary-btn" disabled>禁用状态</button>;
}

这些属性会被React直接转化为DOM节点的对应属性，比如className最终会变成DOM元素的class属性，disabled会触发浏览器原生的按钮禁用行为——和React组件的自定义逻辑无关，是浏览器原生支持的特性。

三、两者的关联与关键区别 #

1. 作用范围不同

   • Props：仅在React组件体系内传递，服务于组件的复用和数据流转；
   • Attributes：仅作用于DOM元素，控制浏览器原生元素的特性。

2. 命名规则差异

   • Props：命名完全自定义（遵循JS变量规则即可），比如userName、isActive；
   • Attributes：必须遵循HTML原生属性命名（React中部分有别名，比如className对应class，htmlFor对应for）。

3. 特殊情况：Props透传为Attributes
   当你给自定义组件传递原生DOM属性时，若组件未显式接收这些属性，React会自动将它们透传到组件内部的根DOM元素上，成为该元素的Attributes。

示例3：Props透传为Attributes

function Button({ label, ...restProps }) {
  // restProps包含所有未显式接收的props，比如id、disabled
  // 将restProps透传给内部button元素，转化为它的attributes
  return <button {...restProps}>{label}</button>;
}

function App() {
  // label是自定义props，id、disabled会被透传为DOM attributes
  return <Button label="点击触发" id="my-button" disabled />;
}

最终渲染出的DOM元素为：<button id="my-button" disabled>点击触发</button>，这里id和disabled从组件的Props转化成了DOM的Attributes。

四、一句话总结 #

• Props是React组件的“自定义输入”，用于组件复用和数据传递；
• Attributes是DOM元素的“原生配置”，用于控制浏览器原生元素的行为；
• 部分场景下Props可透传为Attributes，但二者本质属于不同层面的概念。

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