Hướng dẫn react props html element
Về cơ bản, JSX chỉ cung cấp cú pháp đặc biệt cho hàm Show
được biên dịch thành:
Bạn cũng có thể sử dụng dạng thẻ tự đóng(self-closing) nếu không có children. Do vậy:
được biên dịch thành:
Nếu bạn muốn kiểm tra xem cách mà JSX được chuyển đổi sang JavaScript, bạn có thể thử the online Babel compiler. Chỉ Định Kiểu React ElementPhần đầu tiên của một thẻ JSX xác định kiểu của React element. Các kiểu viết hoa thể
hiện rằng thẻ JSX đang ám chỉ tới một React component. Những thẻ này được biên dịch thành một tham chiếu trực tiếp đến biến được đặt tên, do vậy nếu bạn sử dụng biểu thức JSX React Phải Nằm trong ScopeVì JSX đuợc biên dịch thành lời gọi tới Ví dụ, cả hai import đều cần thiết trong đoạn mã này, mặc dù
Nếu bạn không sử dụng một trình đóng gói JavaScript(JavaScript bundler) và tải React từ một thẻ Sử Dụng Ký Hiệu Chấm cho JSX TypeBạn cũng có thể tham chiếu đến một React component sử dụng ký hiệu chấm từ JSX. Điều này rất tiện lợi nếu bạn có một module export nhiều React component. Ví dụ, nếu
Component Người Dùng Tự Định Nghĩa Phải Được Viết HoaKhi một kiểu element bắt đầu với chữ cái thường, nó đang ám chỉ đến một built-in component như Chúng tôi khuyến khích đặt tên cho các component với chữ cái đầu viết hoa. Nếu bạn có một component bắt đầu với chữ cái viết thường, gán nó cho một biến được viết hoa trước khi sử dụng nó trong JSX. Ví dụ, đoạn mã bên dưới sẽ không chạy như mong đợi: Để khắc phục vấn đề này, chúng tôi sẽ đổi tên Bạn không thể sử dụng một biểu thức tổng hợp để làm một kiểu React element. Nếu bạn muốn sử dụng một biểu thức tổng hợp để thể hiện kiểu của element, chỉ cần gán nó cho một biến được viết hoa trước. Vấn đề này thường xuất hiện khi bạn muốn render một component khác dựa
trên một prop: Để khắc phục vấn đề này, chúng tôi sẽ gán kiểu cho một biến được viết hoa trước: Có vài cách khác nhau để chỉ định props trong JSX. Bạn có thể truyền bất kỳ biểu thức JavaScript nào làm prop, bằng cách bao quanh nó với Đối với Câu lệnh Bạn có thể tìm hiểu thêm về render có điều kiện vầ vòng lặp ở những mục tương ứng. Bạn có thể truyền một string literal làm một prop. Hai biểu thức JSX bên dưới là tương đương: Khi bạn truyền một string literal, giá trị của nó là HTML-unescaped. Do vậy hai biểu thức JSX bên dưới là tương đương: Hành vi này thường không phù hợp. Nó chỉ được đề cập ở đây cho đầy đủ. Nếu bạn không truyền giá trị cho một prop, nó sẽ được mặc định là Nhìn chung, chúng tôi không khuyến khích việc không truyền giá trị cho một prop, vì nó có thể gây nhầm lẫn với
ES6 object shorthand Nếu bạn đã có một
Bạn cũng có thể chọn một vài props mà component của bạn sẽ sử dụng trong khi truyền toàn bộ những props còn lại sử dụng toán tử spread. Ở ví dụ bên trên, Spread attributes có thể hữu dụng nhưng chúng cũng dễ dàng khiển bạn truyền những props không cần thiết tới những component mà không quan tâm tới những props đó hoặc truyền những HTML attribute không hợp lệ tới DOM. Chúng tôi khuyến khích sử dụng cú pháp này một cách hạn chế. Trong biểu thức JSX mà chứa cả thẻ mở và thẻ đóng, nội dung nằm giữa hai thẻ được truyền như một prop đặc biệt: Bạn có thể đặt một chuỗi
ký tự giữa thẻ đóng và thẻ mở và Đây là một JSX hợp lệ, và JSX loại bỏ khoẳng trắng ở đầu và cuối của một dòng. Nó cũng loại bỏ dòng trống. Dòng mới liền kề với các thẻ sẽ bị loại bỏ;
dòng mới ở giữa của string literals được thay thế bằng một khoảng trắng. Do vậy tất cả được render ra kết quả giống nhau: Bạn có thể cung cấp nhiều JSX elements làm children. Điều này rất hữu ích để hiển thị các component lồng nhau: Bạn có thể kết hợp nhiều kiểu
children, do vậy bạn có thể sử dụng string literals cùng với JSX children. Đây là một cách khác mà JSX tương tự như HTML, cả hai đều là JSX hợp lệ và HTML hợp lệ: Một React component cũng có thể trả về một mảng các element: Bạn có thể truyền biểu thức JavaScript bất kỳ làm children, bằng cách bao quanh nó với Điều này khá hữu ích khi render một danh sách các biểu thức JSX với độ dài bất kỳ. Ví dụ, đoạn mã render một danh sách HTML: Các biểu thức JavaScript có thể được kết hợp với những loại children khác. Điều này khá hữu ích thay cho string
templates: Thông thường, các biểu thức JavaScript khi chèn vào trong JSX sẽ được coi như là một chuỗi, một hoặc một danh sách các React element. Tuy nhiên, Children truyền cho một component tùy chỉnh có thể là bất cứ thứ gì, miễn là component đó biến đổi chúng thành thứ mà React có thể hiểu được trước khi render. Cách sử dụng này không phổ biến, nhưng nó vẫn hoạt động nếu bạn muốn mở rộng khả năng của JSX. Điều này có thể hữu ích để render có điều kiện các React element. Đoạn mã JSX bên dưới render Có một lưu ý là một vài giá trị “falsy”, như số Để xử lý vấn đề này, hãy đảm bảo rằng những biểu thức
nằm trước Ngược lại, nếu bạn muốn một giá trị như |