JavaScript nhập nhiều tệp
Thư mục để nhập các mô-đun từ. Trừ khi bạn đã đặt tùy chọn 0 Show
Sự kỳ diệu của các thành phần nằm ở khả năng tái sử dụng của chúng. bạn có thể tạo các thành phần bao gồm các thành phần khác. Nhưng khi bạn lồng ngày càng nhiều thành phần, bạn nên bắt đầu chia chúng thành các tệp khác nhau. Điều này cho phép bạn giữ các tệp của mình dễ quét và tái sử dụng các thành phần ở nhiều nơi hơn Bạn sẽ học
Tệp thành phần gốcTrong Thành phần đầu tiên của bạn, bạn đã tạo một thành phần Ứng dụng. js Ứng dụng. jsĐặt lại Ngã ba function Profile() { return ( <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" /> ); } export default function Gallery() { return ( <section> <h1>Amazing scientistsh1> <Profile /> <Profile /> <Profile /> section> ); }Cho xem nhiều hơn Chúng hiện đang nằm trong tệp thành phần gốc, có tên là import Gallery from './Gallery.js'; export default function App() { return ( <Gallery /> ); }0 trong ví dụ này. Trong Tạo ứng dụng phản ứng, ứng dụng của bạn tồn tại trong import Gallery from './Gallery.js'; export default function App() { return ( <Gallery /> ); }1. Tuy nhiên, tùy thuộc vào thiết lập của bạn, thành phần gốc của bạn có thể nằm trong một tệp khác. Nếu bạn sử dụng một khung với định tuyến dựa trên tệp, chẳng hạn như Tiếp theo. js, thành phần gốc của bạn sẽ khác nhau đối với mỗi trang Xuất và nhập một thành phầnĐiều gì sẽ xảy ra nếu bạn muốn thay đổi màn hình đích trong tương lai và đặt một danh sách sách khoa học ở đó? . Điều này sẽ làm cho chúng trở nên mô đun hơn và có thể tái sử dụng trong các tệp khác. Bạn có thể di chuyển một thành phần trong ba bước
Ở đây cả import Gallery from './Gallery.js'; export default function App() { return ( <Gallery /> ); }0 vào một tệp mới có tên là import Gallery from './Gallery.js'; export default function App() { return ( <Gallery /> ); }7. Bây giờ bạn có thể thay đổi import Gallery from './Gallery.js'; export default function App() { return ( <Gallery /> ); }0 để nhập Gallery từ import Gallery from './Gallery.js'; export default function App() { return ( <Gallery /> ); }7 Ứng dụng. jsGallery. js Ứng dụng. jsĐặt lại Ngã ba import Gallery from './Gallery.js'; export default function App() { return ( <Gallery /> ); } Lưu ý cách ví dụ này được chia thành hai tệp thành phần bây giờ
Ghi chúBạn có thể gặp các tệp bỏ phần mở rộng tệp 8 như vậy
9 hoặc 0 sẽ hoạt động với React, mặc dù cái trước gần giống với cách thức hoạt động của các Mô-đun ES gốc hơnLặn sâuXuất mặc định so với xuất có tênHiển thị chi tiếtCó hai cách chính để xuất giá trị bằng JavaScript. xuất khẩu mặc định và xuất khẩu được đặt tên. Cho đến nay, các ví dụ của chúng tôi chỉ sử dụng xuất khẩu mặc định. Nhưng bạn có thể sử dụng một hoặc cả hai trong cùng một tệp. Một tệp không thể có nhiều hơn một lần xuất mặc định, nhưng nó có thể có bao nhiêu lần xuất được đặt tên tùy thích Cách bạn xuất thành phần của mình chỉ ra cách bạn phải nhập nó. Bạn sẽ gặp lỗi nếu cố gắng nhập một bản xuất mặc định giống như cách bạn thực hiện một bản xuất có tên. Biểu đồ này có thể giúp bạn theo dõi SyntaxExport statementImport statementDefault 1 2Named 3 4Khi bạn viết nhập khẩu mặc định, bạn có thể đặt bất kỳ tên nào bạn muốn sau 5. Ví dụ: thay vào đó, bạn có thể viết 6 và nó vẫn cung cấp cho bạn cùng một bản xuất mặc định. Ngược lại, với cách nhập có tên, tên phải khớp cả hai bên. Đó là lý do tại sao chúng được gọi là nhập khẩu có tênMọi người thường sử dụng xuất mặc định nếu tệp chỉ xuất một thành phần và sử dụng xuất có tên nếu tệp xuất nhiều thành phần và giá trị. Bất kể bạn thích phong cách mã hóa nào, hãy luôn đặt tên có ý nghĩa cho các chức năng thành phần của bạn và các tệp chứa chúng. Các thành phần không có tên, chẳng hạn như 7, không được khuyến khích vì chúng khiến việc gỡ lỗi trở nên khó khăn hơnXuất và nhập nhiều thành phần từ cùng một tệpĐiều gì sẽ xảy ra nếu bạn chỉ muốn hiển thị một ________ 56 _______ thay vì một bộ sưu tập? . Nhưng import Gallery from './Gallery.js'; export default function App() { return ( <Gallery /> ); }7 đã có một lần xuất mặc định và bạn không thể có hai lần xuất mặc định. Bạn có thể tạo một tệp mới có xuất mặc định hoặc bạn có thể thêm xuất có tên cho Profile . Một tệp chỉ có thể có một lần xuất mặc định nhưng có thể có nhiều lần xuất được đặt tên
Đầu tiên, xuất import Gallery from './Gallery.js'; export default function App() { return ( <Gallery /> ); }7 bằng cách sử dụng xuất có tên (không có từ khóa 4)
Sau đó, nhập import Gallery from './Gallery.js'; export default function App() { return ( <Gallery /> ); }7 đến import Gallery from './Gallery.js'; export default function App() { return ( <Gallery /> ); }0 bằng cách nhập có tên (có dấu ngoặc nhọn)
Cuối cùng, kết xuất 8 từ thành phần 7
Bây giờ import Gallery from './Gallery.js'; export default function App() { return ( <Gallery /> ); }7 chứa hai lần xuất. xuất khẩu Gallery mặc định và xuất khẩu Profile có tên. import Gallery from './Gallery.js'; export default function App() { return ( <Gallery /> ); }0 nhập cả hai. Hãy thử chỉnh sửa 8 thành 5 và quay lại ví dụ nàyỨng dụng. jsGallery. js Ứng dụng. jsĐặt lại Ngã ba import Gallery from './Gallery.js'; import { Profile } from './Gallery.js'; export default function App() { return ( <Profile /> ); } Bây giờ bạn đang sử dụng kết hợp xuất mặc định và xuất có tên
Tóm tắt lạiTrên trang này bạn đã học
Hãy thử một số thử tháchThử thách 1/1 . Tách các thành phần hơn nữaHiện tại, import Gallery from './Gallery.js'; export default function App() { return ( <Gallery /> ); }7 xuất cả Profile và Gallery , điều này hơi khó hiểuDi chuyển thành phần // Move me to Profile.js! export function Profile() { return ( <img src="https://i.imgur.com/QIrZWGIs.jpg" alt="Alan L. Hart" /> ); } export default function Gallery() { return ( <section> <h1>Amazing scientistsh1> <Profile /> <Profile /> <Profile /> section> ); }1 của chính nó, sau đó thay đổi thành phần 7 để lần lượt hiển thị cả hai thành phần 8 và 5Bạn có thể sử dụng xuất mặc định hoặc xuất có tên cho import Gallery from './Gallery.js'; export default function App() { return ( <Gallery /> ); }0 và import Gallery from './Gallery.js'; export default function App() { return ( <Gallery /> ); }7. Bạn có thể tham khảo bảng từ tìm hiểu sâu bên trên Làm cách nào để nhập mọi thứ từ một tệp trong JavaScript?Nhập mặc định . nhập myDefault, * dưới dạng myModule từ "/modules/my-module. js"; // myModule. default và myDefault trỏ đến cùng một liên kết nhập myDefault, { foo, bar } từ "/modules/my-module. js"; nhập { mặc định là myDefault } từ "/modules/my-module. js"; Làm cách nào để kết nối hai tệp JavaScript?Chúng tôi có thể bao gồm một tệp JavaScript trong một tệp JavaScript khác bằng cách sử dụng hệ thống mô-đun ES6 gốc . Điều này cho phép chúng tôi chia sẻ mã giữa các tệp JavaScript khác nhau và đạt được tính mô đun trong mã. Có nhiều cách khác để bao gồm tệp JS như Node JS yêu cầu, chức năng getScript của jQuery và Tải xuống.
Làm cách nào để nhập tệp từ cùng một thư mục trong JavaScript?Để tải một tệp trong cùng thư mục với mô-đun hiện tại, bạn sẽ thêm tiền tố vào tên tệp bằng. /. Vì vậy, để tải x. . Nhưng điều đó ném một lỗi. . Nó không nên gây ra lỗi, hãy thử bỏ qua. / và chỉ x. js, một đường dẫn tương đối là hợp lệ. / đang cung cấp cho bạn một đường dẫn tuyệt đối. . Sau đó, bạn đang làm một cái gì đó khác thường Làm cách nào để nhập thư viện trong JavaScript?Locate the correct Javascript download of the library you want to install. Download the library and make a copy in your sketch folder. (If you're using the web editor, you can upload the relevant files using Upload file in the dropdown in the “Sketch Files” sidebar.) Add a
Bài Viết Liên QuanQuảng CáoCó thể bạn quan tâmToplist được quan tâm#1
Top 9 tập bản đồ lớp 8 bài 31 20237 tháng trước#2
Top 6 kết quả thi hsg đà nẵng 2022 20237 tháng trước#3
Top 9 tủ nhựa đài loan 4 cánh 3d 20237 tháng trước#4
#5
Top 8 tìm việc làm tiện, phay bảo q7 20237 tháng trước#6
#7
#8
Top 2 bài the dục phát triển chung lớp 6 2022 20237 tháng trước#9
Top 3 bài giảng vũ điệu sắc màu (lớp 4) 20237 tháng trướcQuảng cáoXem NhiềuQuảng cáoChúng tôiTrợ giúpBản quyền © 2021 Xây Nhà Inc.
|