在用 React 進(jìn)行開(kāi)發(fā)的過(guò)程中，要用到 PropTypes 對(duì)組件的 props 進(jìn)行類型檢查。其中有兩個(gè)類型，element 和 elementType，讓我百思不得其解。這兩個(gè)的區(qū)別到底是什么，在跟小伙伴探討和實(shí)踐之后，產(chǎn)生了這篇文章。

從官方文檔來(lái)看，element 比較好理解，就是 React 元素，即組件。比如 <Foo /> 。

elementType 給出的解釋是 React 元素類型，即 Foo 。

但是這個(gè)「類型」還是讓我很不理解。

我第一次是這么使用的：codesandbox

在這種用法中，我把 elementType 當(dāng)成了個(gè)方法來(lái)調(diào)用，結(jié)果成功渲染了。此時(shí)我以為 elementType 就是個(gè) function，但既然如此，我為什么不用 func 類型呢？

后來(lái)和小伙伴探討，從 isValidElementType 這個(gè)方法發(fā)現(xiàn)，elementType 其實(shí)是個(gè)類型集合。

從這里可以看出，他支持多種類型，有 string、function、Fragment 等等。

于是有了這段代碼：

codesandbox.io/s/xenodochi…

我分別傳了 string、function、Fragment、Suspense。

再回過(guò)頭看官方文檔

原來(lái)真的是放在標(biāo)簽 </> 里的類型。element 是 或者，elementType 是 Foo 或者 Fragment，elementType 的目標(biāo)是生成 element。

到這時(shí)候我徹底明白了，原來(lái) elementType 的用途是用來(lái)做動(dòng)態(tài)標(biāo)簽的。

再看我第一次的寫法

把 element 當(dāng)作一個(gè)方法來(lái)調(diào)用，雖然也沒(méi)報(bào)錯(cuò)并且成功渲染了，那是因?yàn)楹瘮?shù)式組件的原因。但是實(shí)際使用方式是錯(cuò)誤的，這也解了我之前的疑惑，為什么不用 func。原來(lái)根本不是一個(gè)用途。

總結(jié)

elementType 是一個(gè)類型集合，主要用途是用來(lái)做動(dòng)態(tài)標(biāo)簽使用，最終生成 element。但由于官方文檔一筆略過(guò)，而 google 的搜索資料又基本沒(méi)有，可能很少人有動(dòng)態(tài)標(biāo)簽的需求，所以也用不到吧。遇到搞不懂的東西還是得多動(dòng)手，才能把問(wèn)題搞清楚。