/

React 片段

React 片段

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

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

然而，這會在輸出中引入一個不必要的 div。你可以通過使用 React.Fragment 來避免這種情況：

1
2
3
4
5
6
7
8
9
10
11
12
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+）中受到支持：

1
2
3
4
5
6
7
8
9
10
11
12
import React, { Component, Fragment } from 'react'

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

tags: [“React”, “JSX”, “React.Fragment”, “Babel”]