Rate this post

Trong React, bất cứ khi nào bạn muốn hiển thị thứ gì đó trên màn hình, bạn cần sử dụng phương thức render bên trong component. Phương thức render này có thể trả về các phần tử đơn lẻ hoặc nhiều phần tử. Phương thức render sẽ chỉ hiển thị một nút gốc duy nhất bên trong nó tại một thời điểm. Tuy nhiên, nếu bạn muốn trả về nhiều phần tử, phương thức render sẽ yêu cầu thẻ ‘div’ và đặt toàn bộ nội dung hoặc các phần tử bên trong nó. Nút bổ sung này vào DOM đôi khi dẫn đến định dạng sai cho đầu ra HTML của bạn và cũng không được nhiều nhà phát triển yêu thích.

Các bài viết liên quan:

Ví dụ

// Rendering with div tag  
class App extends React.Component {   
     render() {    
      return (   
         //Extraneous div element   
         <div>  
           <h2> Hello World! </h2>   
           <p> Welcome to the React. </p>   
         </div>   
      );   
     }   
}  

Để giải quyết vấn đề này, React đã giới thiệu Fragment từ phiên bản 16.2 trở lên. Các fragments cho phép bạn nhóm một danh sách con mà không cần thêm các nút phụ vào DOM.

Cú pháp

<React.Fragment>  
      <h2> child1 </h2>   
    <p> child2 </p>   
      .. ..... .... ...  
</React.Fragment>  

Ví dụ

// Rendering with fragments tag  
class App extends React.Component {   
    render() {   
     return (   
       <React.Fragment>  
            <h2> Hello World! </h2>   
        <p> Welcome to the React. </p>   
         </React.Fragment>  
     );   
    }   
}   

Tại sao chúng tôi sử dụng Fragment?

Lý do chính để sử dụng thẻ Fragment là:

  • Nó làm cho việc thực thi mã nhanh hơn so với thẻ div.
  • Nó chiếm ít bộ nhớ hơn.

Cú pháp ngắn Fragment

Cũng có một cách viết tắt khác tồn tại để khai báo các đoạn cho phương thức trên. Nó trông giống như thẻ trống mà chúng ta có thể sử dụng ‘<>’ và ” thay vì ‘React.Fragment’.

Ví dụ

//Rendering with short syntax   
class Columns extends React.Component {   
  render() {   
    return (   
      <>    
        <h2> Hello World! </h2>   
        <p> Welcome to the React </p>   
      </>   
    );   
  }   
}   

Các Fragments có khóa

Cú pháp viết tắt không chấp nhận các thuộc tính chính. Bạn cần một khóa để ánh xạ một tập hợp với một mảng các Fragments, chẳng hạn như để tạo danh sách mô tả. Nếu bạn cần cung cấp khóa, bạn phải khai báo các đoạn bằng cú pháp <React.Fragment> rõ ràng.

Lưu ý: Khóa là thuộc tính duy nhất có thể được chuyển với các Phân đoạn.

Ví dụ

Function  = (props) {  
  return (  
    <Fragment>  
      {props.items.data.map(item => (  
        // Without the 'key', React will give a key warning  
        <React.Fragment key={item.id}>  
          <h2>{item.name}</h2>  
          <p>{item.url}</p>  
          <p>{item.description}</p>  
        </React.Fragment>  
      ))}  
    </Fragment>  
  )  
}  

Leave a Reply

Call now
%d bloggers like this: