Extension fragment

background

        jsx Grammar requires return There can only be one root tag .App.js Used to assemble other components ,render Methodical return It usually takes a div Root tag , Self written for each component render Methodical return They all need one div Root tag . This can lead to div Too much nesting .

import React, { Component, Fragment } from 'react'
import Demo from './04-fracment'

export default class App extends Component {
  render() {
    return (
      <div>
        <Demo />
      </div>
    )
  }
}

terms of settlement  

 1. Use Fragment Can solve this problem .

        Fragment The label is a label in form , however reaxt It will be removed automatically during parsing , It's like a place holder .

         Every return Use Fragment As a root tag , When parsing react Will take out Fragment label .

import React, { Component, Fragment } from 'react'
import Demo from './04-fracment'

export default class App extends Component {
  render() {
    return (
      <Fragment>
        <Demo />
      </Fragment>
    )
  }
}

  here , No more div label  

2. Use empty tags

        The effect is the same Fragment. The main difference is Fragment Tags can be added with an attribute key. Empty labels cannot be added . When you need to traverse page nodes ,Fragment Must give a unique key value .

<>
    <Demo />
</>