Mặc dù GatsbyJS là một khung công tác React, nhưng có thể hữu ích nếu biết cách thêm JavaScript tùy chỉnh vào dự án Gatsby của bạn. Có lẽ bạn vừa chuyển trang web cũ của mình sang Gatsby và có một loạt JavaScript vani tùy chỉnh mà bạn không thực sự thích chuyển đổi sang cú pháp ReactJS ngay bây giờ - tôi cảm thấy đúng như vậy.
May mắn thay, việc thêm JavaScript thuần túy vào Gatsby không khó chút nào, bạn chỉ cần hiển thị một tệp đơn giản, html.js , không hiển thị trong dự án Gatsby của bạn theo mặc định.
Để hiển thị (cung cấp) html.js tệp, mở thiết bị đầu cuối của bạn, điều hướng đến thư mục gốc của thư mục dự án Gatsby của bạn và nhập thông tin sau:
cp .cache/default-html.js src/html.js
Bây giờ html.js có sẵn trong src của bạn trong dự án Gatsby của bạn.
Bên trong html.js có một loạt cú pháp HTML mà bạn có thể nhận ra. Đừng chạm vào bất kỳ mã hiện có nào, nhưng hãy chú ý đến phần tử div có dangerouslySetInnerHTML thuộc tính. Chúng ta cần sử dụng cùng một thuộc tính, với <script> yếu tố.
Sao chép và dán đoạn mã sau vào ngay trên html.js của bạn thẻ nội dung đóng của tệp tin </body> :
<script
dangerouslySetInnerHTML={{
__html: `
console.log('Plain JavaScript inside Gatsby!');
`
}}
/>Lưu các thay đổi của bạn và khởi động máy chủ Gatsby của bạn hoặc làm mới tab trình duyệt của bạn nếu Gatsby đang chạy. Nếu làm đúng, bạn sẽ thấy thông báo sau trong bảng điều khiển chrome của mình:
Plain JavaScript inside Gatsby!Hãy thử thêm sự kiện nhấp chuột với thông báo cảnh báo bên trong phần tử tập lệnh của bạn:
document.body.addEventListener('click', function() {
alert('JavaScript!')
})Bây giờ khi bạn nhấp vào bất kỳ đâu trên trang của mình, nó sẽ bật lên với một thông báo cảnh báo, nói rằng “JavaScript!”.
Tài nguyên:
Xem tài liệu chính thức của GatsbyJS để (thêm JavaScript tùy chỉnh) [https://www.gatsbyjs.org/docs/custom-html/#adding-custom-javascript]