0x001 引出問題

讓我們先來看一個(gè)栗子：

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

上面的栗子中的render返回了兩個(gè)同級(jí)h1，編譯的時(shí)候?qū)?huì)看到一個(gè)報(bào)錯(cuò):

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

jsx只能返回一個(gè)閉合的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>} }

總的來說，只能返回一個(gè)根元素，但是實(shí)際中總會(huì)遇到奇特的場(chǎng)景，希望可以返回多個(gè)，栗子：

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>} }

很明顯，會(huì)有語法錯(cuò)誤，修復(fù)：

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

查看效果：

多了一級(jí)，那真的沒辦法了嗎？當(dāng)然有了，就是Fragment了

0x002 Fragment

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

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

當(dāng)然，這是一個(gè)縮寫，完整的寫法應(yīng)該是：

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

• <React.Fragment></React.Fragment>效果和<></>是一致的但是有一點(diǎn)區(qū)別就是React.Fragment是可以有屬性的，而<></>無法擁有屬性。
• <React.Fragment></React.Fragment> 只有一個(gè)屬性，那就是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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。