Thành phần React có phải trả về HTML không?

JSX được sử dụng cùng với React để loại bỏ các phần được ghép lỏng lẻo của một thành phần, như HTML, CSS và JavaScript và khiến chúng hoạt động cùng nhau trong một tệp duy nhất được gọi là thành phần. Cú pháp của nó có thể dễ viết và hấp dẫn trực quan. Do đó, các phần tử JSX cũng có thể được trả về biến và biến đó có thể được sử dụng để hiển thị

Để minh họa ví dụ, hãy tạo một bảng tĩnh trong một hàm và đưa nó về biến. Chúng ta cũng sẽ tạo một tĩnh ____14_______ bên trong hàm.

1getTable() {
2    return (
3      <div>
4        <table border="2">
5          <tr>
6            <td>Row 1 Col 1td>
7            <td>Row 1 Col 2td>
8          tr>
9          <tr>
10            <td>Row 2 Col 1td>
11            <td>Row 2 Col 2td>
12          tr>
13          <tr>
14            <td>Row 3 Col 1td>
15            <td>Row 3 Col 2td>
16          tr>
17        table>
18      div>
19    );
20}

jsx

Bảng được tạo trong hàm và trả về tập hợp các đánh dấu JSX cho hàm. Vì vậy, khi bạn truy cập chức năng, các đánh dấu JSX tương ứng của bảng sẽ được thay thế

Bước tiếp theo là gọi hàm và gán nó cho biến, như hình bên dưới

1render() {
2    // Calling function and assigned it to the variable
3    const mytable = this.getTable();
4
5    return (
6      <>
7        {/* rendered the JSX */}
8        <div>{mytable}div> 
9      >
10    );
11}

jsx

Hàm this.getTable() được gọi và nó trả về kết quả hoàn chỉnh

1render() {
2    // Calling function and assigned it to the variable
3    const mytable = this.getTable();
4
5    return (
6      <>
7        {/* rendered the JSX */}
8        <div>{mytable}div> 
9      >
10    );
11}

Kết xuất có điều kiện JSX

Cả nội dung tĩnh và động đều có thể được cung cấp cho DOM. Do đó, bạn có thể hiển thị nội dung động dựa trên các toán tử điều kiện riêng lẻ, chẳng hạn như toán tử bậc ba. Ví dụ: nếu bạn muốn hiển thị trạng thái người dùng đã đăng nhập đang hoạt động hoặc không hoạt động, màu hoặc nhãn trạng thái có thể thay đổi dựa trên điều kiện, chẳng hạn như thay đổi thành màu xanh lục hoặc đỏ

Để hiểu rõ hơn, hãy tạo hai hàm hiển thị nhãn trạng thái

1render() {
2    // Calling function and assigned it to the variable
3    const mytable = this.getTable();
4
5    return (
6      <>
7        {/* rendered the JSX */}
8        <div>{mytable}div> 
9      >
10    );
11}

1render() {
2    // Calling function and assigned it to the variable
3    const mytable = this.getTable();
4
5    return (
6      <>
7        {/* rendered the JSX */}
8        <div>{mytable}div> 
9      >
10    );
11}

1activeContent() {
2   return <label>Activelabel>;
3}
4
5inActiveContent() {
6   return <label>In-activelabel>;
7}

jsx

Mỗi hàm trên trả về phần tử JSX cụ thể dưới dạng phần tử JSX

1render() {
2    // Calling function and assigned it to the variable
3    const mytable = this.getTable();
4
5    return (
6      <>
7        {/* rendered the JSX */}
8        <div>{mytable}div> 
9      >
10    );
11}

Tạo khóa vào đối tượng trạng thái, như hình bên dưới

1constructor(props) {
2    super(props);
3    this.state = {
4      isActive: false
5    };
6}

jsx

Quan sát rằng có một khóa có tên

1render() {
2    // Calling function and assigned it to the variable
3    const mytable = this.getTable();
4
5    return (
6      <>
7        {/* rendered the JSX */}
8        <div>{mytable}div> 
9      >
10    );
11}

Bây giờ, hãy gọi hai hàm trên và đặt kết quả của chúng vào các biến bổ sung

1const activeVariable = this.activeContent();
2const inactiveVariable = this.inActiveContent();

jsx

1render() {
2    // Calling function and assigned it to the variable
3    const mytable = this.getTable();
4
5    return (
6      <>
7        {/* rendered the JSX */}
8        <div>{mytable}div> 
9      >
10    );
11}

1render() {
2    // Calling function and assigned it to the variable
3    const mytable = this.getTable();
4
5    return (
6      <>
7        {/* rendered the JSX */}
8        <div>{mytable}div> 
9      >
10    );
11}

1render() {
2    const activeVariable = this.activeContent();
3    const inactiveVariable = this.inActiveContent();
4
5    return (
6      <>
7        {this.state.isActive ? activeVariable : inactiveVariable}
8      >
9    );
10}

jsx

Điều kiện bậc ba ở trên sử dụng ____1_______7 và dựa trên giá trị của nó (đúng hoặc sai), nhãn tương ứng sẽ được hiển thị trong DOM. Sử dụng một biến trong ______17_______ là một cách tiếp cận phổ biến. Hầu hết các nhà phát triển React sử dụng chúng để quản lý nội dung động từ việc triển khai chức năng và chúng dễ dàng vận hành trong toàn bộ thành phần.

Phần kết luận

JSX với React không phải là một cách tiếp cận bắt buộc, nhưng nó có thể được sử dụng một cách hiệu quả để sử dụng các biểu thức dựa trên JavaScript và các tính năng khác nội tuyến với đánh dấu HTML

Trả về một biến trong hàm kết xuất là cách dễ nhất để quản lý đánh dấu JSX, cho dù nội dung là tĩnh hay động. Hãy dùng thử và đào sâu vào JSX

React có tự động thoát khỏi HTML không?

Một thành phần trả về gì trong React?

React có xuất ra HTML không?

Reply 0 0 Chia sẻ