反应片段

如何使用React.Fragment创建不可见的HTML标签

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

但是,这导致不必要的div在输出中。您可以通过使用以下方法来避免这种情况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> ) } }

它也有非常好的速记语法<></>仅在最新版本(和Babel 7+)中受支持:

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

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

免费下载我的反应手册


更多反应教程: