JSX如何区分Props、事件处理器与自定义Props？结合示例组件解析判定逻辑

嘿，作为React新手能问到这些点，说明你在认真琢磨JSX的底层逻辑，这很棒！咱们一步步来拆解你的疑问：

1. JSX是如何区分Props、事件处理器和自定义Props的？ #

首先得明确一个核心：在React的概念里，所有传递给组件的“属性”本质上都是Props——事件处理器和所谓的“自定义Props”只是根据用途、命名规则划分的特殊props，并没有严格的“类型边界”。JSX主要通过以下逻辑来区分它们的处理方式：

• 事件处理器：这类props的命名遵循on[事件名]的驼峰式规则（比如onClick、onChange）。React会识别这种命名，将其绑定为对应的合成事件（React自己封装的跨浏览器兼容事件系统）。如果是给原生DOM元素（比如<div>）使用，React会把它转换成DOM原生事件的监听；如果是给自定义组件使用，它就是一个普通props，由组件内部决定是否将其绑定到内部元素的事件上。
• 标准HTML属性映射的Props：比如className（对应HTML的class，因为class是JS的保留字）、style（需要传对象而非字符串）这类，React会把它们转换成对应的DOM元素属性。同样，如果是给自定义组件使用，它们也只是普通props，组件可以选择如何处理。
• 自定义Props：所有不符合上述两种情况的props都属于自定义Props，完全由开发者定义用途——可以用来传递数据、控制组件状态、配置组件行为等等，React不会对它们做特殊处理，只会原封不动地传递给组件，由组件内部逻辑决定怎么使用。

2. 针对示例组件的属性判定逻辑 #

咱们拿你给出的示例<SampleComponent className={'container'} onClick={componentClickHandler} someCustomProp={123} />来逐个分析：

• className={'container'}：
  如果SampleComponent是封装原生DOM元素的组件（比如内部渲染了<div>），React会把这个props转换成DOM元素的class属性；如果它是纯自定义组件，那它就是一个普通props，组件可以通过props.className获取这个值，用来传给内部组件、判断样式逻辑等。
• onClick={componentClickHandler}：
  React会识别onClick的命名，把它当作事件处理器props。如果SampleComponent是原生DOM元素，React会把componentClickHandler绑定为该元素的点击事件监听；如果是自定义组件，组件可以选择接收这个props，并把它绑定到内部某个DOM元素的onClick上，或者完全不用它——全看组件的设计逻辑。
• someCustomProp={123}：
  这个既不是标准HTML属性的映射，也不符合事件处理器的命名规则，所以是纯粹的自定义Props。SampleComponent可以通过props.someCustomProp拿到123这个值，用来渲染内容、计算状态或者做任何你需要的事情。

最后补充一句：你用的术语其实没什么大问题，只是可以更精准一点——所有这些“属性”都是Props，事件处理器是特殊用途的Props，自定义Props是你自己定义的非标准Props～

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