React的碎片化组件

3 年 ago

逸, 科

1 minute

与Vue.js类似，必须将所有内容绑定在一个根元素上。因此，如果按照以下方式处理，将会出现错误。

const Example = () => (
  <div>
      <p>Hello world</p>
  </div>
  <div>
      <p>Hello world</p>
  </div>
)

可以使用div来包围，但如果您确实不想要任何包围的话，可以使用所谓的“片段”。

import React from 'react'
const Example = () => (
  <React.Fragment>
    <div>
        <p>Hello world</p>
    </div>
    <div>
        <p>Hello world</p>
    </div>
  </React.Fragment>
)

通过这样做，React.Fragment的部分将不会被渲染。需要注意的是，如果像下面这样导入Fragment，可以省略React。

import { Fragment } from 'react'
const Example = () => (
  <Fragment>
    <div>
        <p>Hello world</p>
    </div>
    <div>
        <p>Hello world</p>
    </div>
  </Fragment>
)