扩展-Fragment

背景

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