làm thế nào để xử lý các địa ngục nhập khẩu trong phản ứng?

Question

Tôi đang chạy ứng dụng phản ứng của mình qua Nút. Có cách nào để dễ dàng xử lý địa ngục nhập này không?

Tôi đang chạy

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

như bắt đầu NPM. Và server.js là một tốc máy chủ đơn giản mà phục vụ ReactDOMServer.renderToString(<MyApp />)

Một số phản ứng của tôi thành phần đều có một cái gì đó như thế này:

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"; 

này là dễ bị lỗi, một changement như tên thư mục sẽ cho kết quả tự nhập mọi tệp để cập nhật điều này.

bạn có biết làm cách nào để khắc phục điều này không. Lý tưởng nhất là tôi sẽ có một cái gì đó như thế này:

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

là có thể? Làm sao?

Cảm ơn bạn!

Answer 1

Bạn có thể tạo tệp thành phần chung trong thư mục organisms để đạt được điều đó. Chỉ cần tạo một mới common.js hoặc bất cứ tên như sau:

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"; 

Sau đó, trong tập tin khác của bạn:

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

Answer 2

này cũng không trông đẹp hơn rất nhiều với tôi:

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

... vì để thực hiện điều đó, bạn cần xuất/nhập vào "myComponents" mỗi khi bạn tạo thành phần mới.

Vấn đề cốt lõi mà tôi thấy trong ví dụ của bạn là việc sử dụng đường dẫn tương đối cho hàng nhập giúp cơ sở mã của bạn rất khó duy trì.

Để thoát khỏi "địa ngục nhập" trong React, một tùy chọn phổ biến là tạo các câu lệnh nhập không có đường dẫn tương đối.

Với một tinh chỉnh nhỏ cho cấu hình Webpack của bạn, bạn có thể tải xuống tệp để tải tệp tương ứng với gốc ứng dụng. Xem here và đọc thêm here.