Làm cách nào để chuyển đổi tệp HTML thành tệp JSX?

Chỉ cần sao chép HTML từ bất cứ đâu và dán nó vào bất kỳ tệp JavaScript hoặc TypeScript nào. Nó đã tự động được chuyển đổi thành JSX

Chế độ on-demand

Đôi khi việc chuyển đổi JSX tự động có thể gây khó chịu, chẳng hạn như khi làm việc trên các dự án lai sử dụng cả JSX và HTML

Nếu bạn muốn tự mình kiểm soát quá trình chuyển đổi, thì có chế độ on-demand, có thể được kích hoạt bằng cách đặt cài đặt paste-html-as-jsx.mode thành on-demand

Khi chế độ on-demand đang hoạt động, HTML đã sao chép sẽ KHÔNG được tự động chuyển đổi. Một lệnh được thêm vào bảng có thể chuyển đổi nội dung khay nhớ tạm của bạn từ HTML sang JSX bất kỳ lúc nào

Làm thế nào nó hoạt động

Vì API tiện ích mở rộng VSCode không cung cấp điểm chặn để sửa đổi nội dung bảng tạm trước khi dán, điều này phải dựa vào việc thay đổi văn bản bảng tạm vào những thời điểm có khả năng phù hợp

Tiện ích bắt đầu hoạt động khi một trong các sự kiện sau xảy ra

• Bạn tập trung vào cửa sổ VSCode và trình chỉnh sửa hiện tại có id ngôn ngữ có liên quan
• Bạn tập trung vào một trình soạn thảo khác có id ngôn ngữ phù hợp

Các id ngôn ngữ có liên quan là

• javascript
• javascriptreact
• typescriptreact

Sau đó, tiện ích mở rộng sẽ kiểm tra xem khay nhớ tạm có phải là HTML hay không bằng cách kiểm tra xem ký tự không phải khoảng trắng đầu tiên có phải là < và ký tự cuối cùng là > không (tôi biết, nó không chính xác lắm). Nếu điều đó đúng, nó sẽ chuyển đổi nội dung trong khay nhớ tạm của bạn thành JSX và ghi lại

Vấn đề hoặc Gợi ý

Nếu bạn gặp bất kỳ sự cố nào hoặc có ý tưởng về cách cải thiện tiện ích mở rộng, vui lòng mở một sự cố

Dán HTML dưới dạng JSX, tiện ích mở rộng VSCode của leodriesch

Nếu bạn thích tiện ích mở rộng này và muốn biết về những thứ thú vị hơn mà tôi làm, hãy xem Twitter của tôi @leodriesch

JSX cho phép chúng ta viết các phần tử HTML bằng JavaScript và đặt chúng vào DOM mà không cần bất kỳ phương thức

const myElement = React.createElement('h1', {}, 'I do not use JSX!');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

JSX chuyển đổi các thẻ HTML thành các phần tử phản ứng

Bạn không bắt buộc phải sử dụng JSX, nhưng JSX giúp viết các ứng dụng React dễ dàng hơn

Đây là hai ví dụ. Cái đầu tiên sử dụng JSX và cái thứ hai thì không

ví dụ 1

JSX

const myElement = I Love JSX!;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

Chạy ví dụ »

ví dụ 2

không có JSX

const myElement = React.createElement('h1', {}, 'I do not use JSX!');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

Chạy ví dụ »

Như bạn có thể thấy trong ví dụ đầu tiên, JSX cho phép chúng ta viết HTML trực tiếp trong mã JavaScript

JSX là phần mở rộng của ngôn ngữ JavaScript dựa trên ES6 và được dịch sang JavaScript thông thường khi chạy

Biểu thức trong JSX

Với JSX, bạn có thể viết các biểu thức bên trong dấu ngoặc nhọn

const myElement = React.createElement('h1', {}, 'I do not use JSX!');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

Biểu thức có thể là một biến hoặc thuộc tính React hoặc bất kỳ biểu thức JavaScript hợp lệ nào khác. JSX sẽ thực thi biểu thức và trả về kết quả

Thí dụ

Thực hiện biểu thức

const myElement = React.createElement('h1', {}, 'I do not use JSX!');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

const myElement = React is {5 + 5} times better with JSX;

Chạy ví dụ »

Chèn một khối HTML lớn

Để viết HTML trên nhiều dòng, hãy đặt HTML bên trong dấu ngoặc đơn

Thí dụ

Tạo một danh sách với ba mục danh sách

const myElement = (
  

    
Apples
    
Bananas
    
Cherries
  
);

Chạy ví dụ »

Một yếu tố cấp cao nhất

Mã HTML phải được bọc trong MỘT phần tử cấp cao nhất

Vì vậy, nếu bạn muốn viết hai đoạn văn, bạn phải đặt chúng bên trong phần tử cha, chẳng hạn như phần tử

const myElement = React.createElement('h1', {}, 'I do not use JSX!');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

Thí dụ

Gói hai đoạn bên trong một phần tử DIV

const myElement = (
  

    
I am a paragraph.
    
I am a paragraph too.
  

);

Chạy ví dụ »

JSX sẽ đưa ra lỗi nếu HTML không chính xác hoặc nếu HTML thiếu phần tử cha

Ngoài ra, bạn có thể sử dụng một "đoạn" để bọc nhiều dòng. Điều này sẽ ngăn việc thêm các nút bổ sung vào DOM một cách không cần thiết

Một đoạn trông giống như một thẻ HTML trống.

const myElement = React.createElement('h1', {}, 'I do not use JSX!');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

Thí dụ

Bọc hai đoạn bên trong một đoạn

const myElement = (
  <>
    
I am a paragraph.
    
I am a paragraph too.
  
);

Chạy ví dụ »

Các phần tử phải được đóng

JSX tuân theo các quy tắc XML và do đó các phần tử HTML phải được đóng đúng cách

Thí dụ

Đóng các phần tử trống bằng

const myElement = React.createElement('h1', {}, 'I do not use JSX!');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

const myElement = ;

Chạy ví dụ »

JSX sẽ báo lỗi nếu HTML không được đóng đúng cách

Lớp thuộc tính = className

Thuộc tính

const myElement = React.createElement('h1', {}, 'I do not use JSX!');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

const myElement = React.createElement('h1', {}, 'I do not use JSX!');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

Sử dụng thuộc tính

const myElement = React is {5 + 5} times better with JSX;

Thay vào đó, JSX đã giải quyết vấn đề này bằng cách sử dụng

const myElement = React is {5 + 5} times better with JSX;

const myElement = React is {5 + 5} times better with JSX;

const myElement = React.createElement('h1', {}, 'I do not use JSX!');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

Thí dụ

Sử dụng thuộc tính

const myElement = React is {5 + 5} times better with JSX;

const myElement = React.createElement('h1', {}, 'I do not use JSX!');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

const myElement = Hello World;

Chạy ví dụ »

Điều kiện - câu lệnh if

React hỗ trợ các câu lệnh

const myElement = React is {5 + 5} times better with JSX;

Để có thể sử dụng các câu lệnh có điều kiện trong JSX, bạn nên đặt các câu lệnh

const myElement = React is {5 + 5} times better with JSX;

lựa chọn 1

Viết các câu lệnh

const myElement = React is {5 + 5} times better with JSX;

Thí dụ

Viết "Xin chào" nếu

const myElement = React is {5 + 5} times better with JSX;

const x = 5;
let text = "Goodbye";
if (x < 10) {
  text = "Hello";
}

const myElement = {text};

Chạy ví dụ »

Lựa chọn 2

Sử dụng biểu thức ternary thay thế

Thí dụ

Viết "Xin chào" nếu

const myElement = React is {5 + 5} times better with JSX;

const x = 5;

const myElement = {(x) < 10 ? "Hello" : "Goodbye"};

Chạy ví dụ »

Lưu ý rằng để nhúng một biểu thức JavaScript bên trong JSX, JavaScript phải được bao bọc bởi dấu ngoặc nhọn,

const myElement = (
  

    
Apples
    
Bananas
    
Cherries
  
);

Làm cách nào để chuyển đổi tệp HTML sang JSX?

Làm cách nào để chuyển đổi HTML sang JSX trong Visual Studio Code?

Làm cách nào để chuyển đổi mẫu HTML thành ReactJS?

HTML và JSX có giống nhau không?