如何使用 React 片段創建不可見的 HTML 標籤

請注意,我將返回值包裝在 div 中。這是因為組件只能返回一個元素,如果你想要多於一個元素,你需要用另一個容器標籤包裹它。

然而,這會在輸出中引入一個不必要的 div。你可以通過使用 React.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>
 )
 }
}

此外,還有一種非常簡潔的簡寫語法 <></>,它僅在最新版本(和 Babel 7+)中受到支持:

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

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