React片段

最新推荐文章于 2026-04-07 12:34:17 发布

翻译最新推荐文章于 2026-04-07 12:34:17 发布 · 176 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://flaviocopes.com/react-fragment/

标签

#react #html #vue #react native #javascript

#ViewUI

收录于

了解为何在React中使用Fragment来避免不必要的div元素。本文解释了组件只能返回一个元素的限制，并展示了如何利用React.Fragment或其速记语法来组合多个子元素。

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