react的ant框架中的form表单在用的时候为什么可以写成<From.Item>标签中为什么可以点操作

Question

react的ant框架中的表单在用的时候为什么可以写成<From.Item>.
标签中为什么可以点操作?

Answer 1

这个问题从表到里可以一直深入到 React.createElement 以及 React 如何渲染 JSX 上，可以一步一步寻找问题的答案。
第一步：从问题本身入手，先去 GitHub 上 ant-design 的 repo 查看 Form 的源码

从源码中我们可以看到，FormItem 是作为 Form 的一个静态属性 Item 存在的。

第二步：为什么 JSX 的标签可以写成 <Form.Item> 的形式

首先我们要明确一点，JSX 只是一个语法糖，最终是要转化成 React.createElement 方法的形式。
知道了这一点之后我们可以开始动手实践，看下 JSX 会被转化成什么样子。

从这里我们可以看到，这里已经将 <Form.Item> 转化为了 React.createElement 方法形式， 其中 _Form.default.Item 也解释了 Form 源码 为什么要将 FormItem 作为 Form 的静态属性 Item

第三步：去探索 React.createElement 里的机制......

接下来，我相信题主也应该知道该怎么往下继续探索了吧，因为后续的内容可以写一篇文章进行解析了，主要看思考的人想得到那种程度的答案。这里先提供一个方法给题主，过段时间再整理一篇文章出来对React.createElement 以及整个渲染机制进行探索解析。