Reactのすべてのコンポーネントをインポートするには？私がやりたい

Question

この

でsrc/modules/layout/nav.js

... 
export default NavBar; 

でsrc/modules/layout/side.js

... 
export default sideBar; 

でsrc/modules/layout/index.js

import NavBar from './nav'; 
import sideBar from './side'; 
export { NavBar, sideBar }; 

src/modules/index.js

で

import * from './layout' 

最後のビットが機能しません。。チュートリアルによると、私はその後src/App.jsに移動して使用することができるだろうnavBarよう：

から

インポート{ナビゲーションバー}」./modules'

しかし*が、私は動作しないということができませんそれを行う。 App.jsに続いsrc/modules/index.js

import * as All from './layout' 
export All 

にこの

のように移動することなく任意の代替があり、All.navBarを行きます。それは醜い感じです

Answer 1

まあ、私はあなたが持っているものを通過しました。あなたが実際に必要としていることは、その理由を理解することです。達成したいのは、コンポーネントがエクスポートされたファイルではなく、単一のファイルからコンポーネントをインポートすることです。

import NavBar from 'src/modules/layout/NavBar'; 
 
import SideBar from 'src/modules/layout/SideBar';

You don't want to do this:

しかし、あなたがそれらを使用したいと思うところはどこでも、単一のファイルからすべてのコンポーネントをインポートすることで何をしたいです。 そのような場合は、複雑性を追加する必要はありません。あなただけやらなければならないことは、次のとおりです。

// export the components like this 
 
export default NavBar; 
 
export default SideBar; 
 

 
// Then, in your src/modules/layout/index.js file, import // the components you exported just the way you did it 
 

 
import NavBar from './NavBar'; 
 
import SideBar from './SideBar'; 
 

 
export { 
 
NavBar, 
 
SideBar 
 
} 
 

 
// Hence, wherever you need both components, you can easily do this: 
 
import { NavBar, SideBar } from '../index.js' 
 

 
// From the above, you are just importing both components from the index.js file.

だから、私はそれがあなたの質問に答えると信じています。