2020/11/03

[React]Functional Component 製作上下層共用元件方法

 

源自:【學習筆記】React 边做边学(从零开始,包含Hooks)【25, 26. 彈出組件】一節。

課程中使用 Class 元件設計,CodeSandbox Demo1

看著 Panel 開開關關,心想使用 Functional 元件重新設計應該不是件難事,沒想到在做完之後跳出錯誤訊息:


Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: null.

為什麼會得到這樣的錯誤訊息?【Class Instance】

訊息內大致上是說:在應該有值、元件的位置卻得到 null。原因是 ES6 在建立 Class 時會帶有 Instance,典型語法就是【this】應用,this 在 Functional 元件是不受支援的。

題外話,Classes 在 MDN 中對物件導向迷思的解釋:

ECMAScript 6 中引入了類別 (class) 作為 JavaScript 現有原型程式(prototype-based)繼承的語法糖。類別語法並不是要引入新的物件導向繼承模型到 JavaScript 中,而是提供一個更簡潔的語法來建立物件和處理繼承。
實在是看不出 React 中用 Classes 來寫有簡潔的趨勢,不知你是否也和我有一樣想法?