React中prop是什么？为何className属于prop而非属性？

你混淆的核心是React的prop概念和原生DOM的属性概念的区别，直接说结论：
在React的JSX语法中，你写的className="square"就是传递给<button>这个React内置组件的prop，同时它最终会被React转换成真实DOM元素的class属性。

具体拆解：

• 对React来说，所有传递给组件（包括<button>、<div>这类原生HTML对应的React内置组件）的“属性”，都统一称为prop。不管是给自定义组件传的userName="Alice"，还是给原生按钮传的className="square"，在React的逻辑里都是组件接收的输入props。
• 之所以用className而不是原生的class，是因为class是JavaScript的关键字，为了避免语法冲突，React才用className作为对应的prop名称。当React把JSX渲染成浏览器能识别的真实DOM时，会自动把className这个prop映射成DOM元素的class属性，这样CSS的类选择器就能正常生效了。
• 简单区分：prop是React组件层面的输入值，DOM属性是浏览器真实元素的特性。React相当于中间层，负责把合适的props转换成对应的DOM属性（比如htmlFor对应DOM的for，value对应DOM的value属性等）。

举个直观的例子：

<button className="square" onClick={handleClick}>X</button>

这里的className和onClick都是传递给React <button>组件的props，React会分别处理：

1. 把className="square"转换成DOM按钮的class="square"属性；
2. 把onClick={handleClick}绑定成DOM按钮的点击事件。

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