Phân đoạn phản ứng

Cách sử dụng React.Fragment để tạo các thẻ HTML ẩn

Lưu ý cách tôi bọc các giá trị trả về trong mộtdiv. Điều này là do một thành phần chỉ có thể trả về một phần tử duy nhất và nếu bạn muốn nhiều hơn một phần tử, bạn cần phải bọc nó bằng một thẻ vùng chứa khác.

Tuy nhiên, điều này gây ra mộtdivtrong đầu ra. Bạn có thể tránh điều này bằng cách sử dụngReact.Fragment:

import React, { Component, Fragment } from 'react'

class BlogPostExcerpt extends Component { render() { return ( <React.Fragment> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </React.Fragment> ) } }

cũng có một cú pháp viết tắt rất hay<></>chỉ được hỗ trợ trong các bản phát hành gần đây (và Babel 7+):

import React, { Component, Fragment } from 'react'

class BlogPostExcerpt extends Component { render() { return ( <> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </> ) } }

Tải xuống miễn phí của tôiSổ tay React


Các hướng dẫn về phản ứng khác: