背景
jsx语法要求return只能有一个根标签。App.js 用来组合其他组件,render方法的return一般需要一个div根标签,自编写的每个组件的render方法的return也都需要一个div根标签。这会导致div嵌套过多。
import React, { Component, Fragment } from 'react' import Demo from './04-fracment' export default class App extends Component { render() { return ( <div> <Demo /> </div> ) } }
解决办法
1.使用Fragment可以解决这个问题。
Fragment标签形式上是一个标签,但是reaxt解析时会自动去掉,类似于占位符。
每个return使用Fragment作为根标签,解析时react会去掉Fragment标签。
import React, { Component, Fragment } from 'react' import Demo from './04-fracment' export default class App extends Component { render() { return ( <Fragment> <Demo /> </Fragment> ) } }
此时,不再有div标签
2.使用空标签
效果同Fragment。区别主要还是Fragment标签可以加一个属性key。空标签不可以加。当需要遍历页面节点时,Fragment必须给个唯一的key值。
<> <Demo /> </>