無法解析導入的模塊

Question

我在我的react-native項目中有以下目錄結構。

project 
    |-- src 
    | |-- components 
    | | |-- ComponentA 
    | | | |-- ComponentA.js 
    | | |-- ComponentB 
    | | | |-- ComponentB.js 
    |--App.js 
    |--Package.json 

在ComponentA.js我試圖導入以componentB像這樣：

import ComponentB from '../../ComponentB' 

但是，這給了我一個錯誤（500）：

無法解析模塊../ ../ComponentB ..

然後我試過了：

import ComponentB from './src/components/ComponentB' 

但仍然是一樣的錯誤。

我也試過：

import ComponentB from './src/components/ComponentB/ComponentB.js' 

但也沒辦法了。

Answer 1

如果你是默認的出口，然後 import ComponentB from '../ComponentB/ComponentB' 如果你只是想使用'../ComponentB'您需要命名componentB文件夾中的文件，index.js

因爲'./'是相同的水平，使你在同一水平ComponentA ，你試圖達到這樣的：ComponentA/src/.... 當你試圖'../../'你達到了2個層次更高，所以路徑是：'src/ComponentB。

Answer 2

試試這個

import ComponentB from '../ComponentB/ComponentB「

這工作，因爲你正在試圖訪問組件，但你不伸手成分，當你將使用上面的代碼，然後它會走出當前目錄和然後再次到組件目錄，然後到文件夾ComponentB，然後文件名稱爲ComponentB。因此，現在您將能夠從文件ComponentB訪問您的ComponentB。