Question

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

我正在运行

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

作为npm开始。 server.js是一个简单的Express Server，提供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

这对我来说看起来也不是很好：

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

...因为要做到这一点，你需要导出/导入到＆＃34; myComponents＆＃34;每次创建新组件时。

我在您的示例中看到的核心问题是，使用相对路径进行导入会使您的代码库难以维护。

逃避＆＃34;导入地狱＆＃34;在React中，一个流行的选择是使 import语句没有相对路径。

通过对Webpack配置的轻微调整，您可以让它相对于应用程序根目录加载文件。请参阅here并阅读更多here。

Answer 2

您可以在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"

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

2 个答案: