解決因爲export，import錯誤致使的元素類型無效【Element type is invalid】

前些日子作項目時有一個報錯，雖然解決了，可是對於致使的緣由，仍是隻知其一;不知其二。今天忽然發現一篇博客，大受啓發，決定將這個問題系統的總結一下。

報錯信息：

提示元素類型無效，多是忘記從你定義的文件中導出來組件，或者是你弄混了要導入的組件的默認名字，沒有和你導入時的名字相對應。

解決方式：

1：在導出文件中使用export class 組件類名稱 extends Component 將組件導出。此時能夠在要導入的地方使用 import {組件類名稱} from 「路徑」 進行導入使用。
2：在導出文件類中，使用class 組件類名稱 extends Component 對組件類進行定義，並在定義以後使用 export default 組件類名稱的方式將組件進行導出。此時能夠在要導入的地方使用 import 組件類名稱 from 「路徑」 方式將須要的組件類導入進來。

緣由分析：

在初識react-native時就在想爲何每一個文件最上面的導入外部組件的方式會有不一樣

import { View, Text } from "react-native"

import TestCompontent from "../../TestCompontent"

爲何一個帶大括號，另外一個就不帶大括號呢？？？
第一種方式：
帶大括號的表示在導出文件中使用的是export class 組件類名稱 extends Component
而咱們常見的帶大括號引入的組件，都是從一些第三方庫中引入的組件文件，例如從react-native中引入的View，Text組件。這些都是固定的組件名字，他是須要查看文檔，我想引入一個View，就必須知道在這個第三方庫中存在View這個第三方組件，何況一個第三方庫中有許許多多的組件，所以必須知道確切的名稱才能進行導入，而不能本身隨意的起名。
第二種方式：
不帶大括號是使用 export default 組件類名稱的方式將組件類進行導出。此時通常都是一些自定義的組件，何況在自定義組件中通常一個文件只有一個組件，所以只要import 的來源是正確的，就能夠將組件類的名稱進行自定義取名 import Test from "../../TestCompontent"
總結：
1：其實上述兩種方式的區別主要就是export class 和export default class 的區別。使用export default的方式將組件導出時就能夠將組件類的名稱進行自定義。若是使用export的方式進行自定義，那麼就必須按照定義組件類時的名稱進行導入。
2：有幫助的博客連接：
https://segmentfault.com/a/11...