0x001 引出問題

讓我們先來看一個栗子：

class App extends React.Component {render() {return (<h1></h1><h1></h1>)} }ReactDom.render(<App theme='dark'/>,document.getElementById('app') )

上面的栗子中的render返回了兩個同級h1，編譯的時候將會看到一個報錯:

SyntaxError: index.js: Adjacent JSX elements must be wrapped in an enclosing tag.

jsx只能返回一個閉合的tag，比如

class App extends React.Component {render() {return <hr/>} }

或者：

class App extends React.Component {render() {return 'helloworld'} }

又或者：

class App extends React.Component {render() {return <div><h1>title</h1><p>content</p></div>} }

總的來說，只能返回一個根元素，但是實際中總會遇到奇特的場景，希望可以返回多個，栗子：

class Td extends React.Component {render() {return (<td>1</td><td>2</td>)} }class Table extends React.Component {render() {return <table><tr><Td/></tr></table>} }

很明顯，會有語法錯誤，修復：

class Td extends React.Component {render() {return (<div><td>1</td><td>2</td></div>)} }

查看效果：

多了一級，那真的沒辦法了嗎？當然有了，就是Fragment了

0x002 Fragment

class Td extends React.Component {render() {return (<><td>1</td><td>2</td></>)} }

將跟元素替換成<>...</>就行啦

當然，這是一個縮寫，完整的寫法應該是：

class Td extends React.Component {render() {return (<React.Fragment><td>1</td><td>2</td></React.Fragment>)} }

• <React.Fragment></React.Fragment>效果和<></>是一致的但是有一點區別就是React.Fragment是可以有屬性的，而<></>無法擁有屬性。
• <React.Fragment></React.Fragment> 只有一個屬性，那就是key

0x003 栗子

可展開收縮的表格

• 源碼

class Tr extends React.Component {constructor(props) {super(props);this.state = {extend: false}}render() {const {extend} = this.stateconst {data} = this.propsreturn (<><tr><td onClick={() => this.handleExtend()}><button className='btn btn-primary'>{extend ? '展開' : '收起'}</button></td><td>{data.name}</td><td>{data.age}</td></tr>{extend ? <tr><td colSpan='3'>{data.detail}</td></tr> : null}</>);}handleExtend() {this.setState({extend: !this.state.extend})} }class Table extends React.Component {constructor() {super()this.state = {users: [{name: '張三',age: '11',detail: '我很開心'},{name: '李四',age: '22',detail: '我也很開心'},{name: '王五',age: '33',detail: '我比張三和李四更開心'}]}}render() {const {users} = this.statereturn (<table className='table'>{users.map((u, i) => <Tr data={u} key={i}/>)}</table>);} }ReactDom.render(<Table/>,document.getElementById('app')

• 效果

• dom

總結

以上是生活随笔為你收集整理的React入门0x014: Fragment的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。