React片段

Notice how I wrap return values in a div. This is because a component can only return one single element, and if you want more than one, you need to wrap it with another container tag.

注意如何将返回值包装在div 。 这是因为组件只能返回一个元素，如果要多个，则需要用另一个容器标签包装它。

This however causes an unnecessary div in the output. You can avoid this by using React.Fragment:

但是，这会在输出中导致不必要的div 。 您可以通过使用React.Fragment来避免这种React.Fragment ：

import React, { Component, Fragment } from 'react'

class BlogPostExcerpt extends Component {
  render() {
    return (
      <React.Fragment>
        <h1>{this.props.title}</h1>
        <p>{this.props.description}</p>
      </React.Fragment>
    )
  }
}

which also has a very nice shorthand syntax <></> that is supported only in recent releases (and Babel 7+):

它也有一个非常好的速记语法<></> ，只有最近的发行版(和Babel 7+)才支持：

import React, { Component, Fragment } from 'react'

class BlogPostExcerpt extends Component {
  render() {
    return (
      <>
        <h1>{this.props.title}</h1>
        <p>{this.props.description}</p>
      </>
    )
  }
}

翻译自: https://flaviocopes.com/react-fragment/