Tôi có lẽ nên học điều này từ lâu, nhưng than ôi, chúng ta đây. Hóa ra bạn có thể cho biết bạn muốn JSX sử dụng chức năng nào. Đúng, JSX thực sự chỉ có một chuyển đổi chính mà nó thực hiện. Nó biến dấu ngoặc nhọn trong JavaScript thành một lệnh gọi hàm. Vì vậy, nếu bạn viết một dòng như thế này trong JavaScript:
Hello Sau khi xử lý (có thể với Babel và plugin JSX), theo mặc định, bạn sẽ nhận được:
React.createElement("div", ( class: "big" ), "Hello");Nhưng nếu bạn bao gồm một nhận xét chỉ thị cho JSX biết rằng bạn muốn sử dụng chức năng của riêng mình, bạn có thể thay đổi đầu ra đó:
/* @jsx myFunction */ Hello Trở thành:
/* @jsx myFunction */ myFunction("div", ( class: "big" ), "Hello");Điều đó có nghĩa là chúng ta có thể viết hàm của riêng mình. Kinda kỳ lạ, nhưng OK.
Trường hợp sử dụng thực tế là dành cho các thư viện không phải React, như Preact. Tôi học được điều này khi xem các ví dụ của Jason Miller:
Vue cũng có thể được thực hiện theo cách này. Lưu ý rằng cả Vue và Preact đều vận chuyển hchức năng đặc biệt này được thiết kế cho việc này:
Valeri Karpov cũng có một số trường hợp sử dụng thú vị trong bài đăng trên blog của họ, “Tổng quan về JSX với 3 ví dụ không phản ứng”.