怎么处理导入地狱的反应？

Question

我通过Node运行我的反应应用程序.有没有办法轻松处理这个导入地狱？

我在跑

./node_modules/.bin/babel-node --presets react,es2015 server/server.js

作为npm开始.而server.js是一个简单的Express服务器,服务于ReactDOMServer.renderToString(<MyApp />)

我的一些反应组件有这样的东西:

import GenericTemplate from "../../templates/GenericTemplate/GenericTemplate";
import Footer from "../../organisms/Footer/Footer";
import Header from "../../organisms/Header/Header";
import Hero from "../../organisms/Hero/Hero";
import MainMenu from "../../organisms/MainMenu/MainMenu";
import TodoList from "../../organisms/TodoList/TodoList";

这很容易出错,像目录名这样的更改会导致手动输入每个文件来更新它.

你知道我怎么解决这个问题吗？理想情况下,我会有这样的事情:

import { Footer, Header, Hero, MainMenu, TodoList } from "myComponents"

那可能吗？怎么样？

谢谢!

Answer 1

您可以在目录中创建一个通用组件文件organisms来实现此目的。common.js只需使用以下内容创建一个新名称或任何名称：

export Footer from "./Footer/Footer";
export Header from "./Header/Header";  
export Hero from "./Hero/Hero";
export MainMenu from "./MainMenu/MainMenu";
export TodoList from "./TodoList/TodoList";

然后在你的另一个文件中：

import { Footer, Header, Hero, MainMenu, TodoList } from "path to common.js"