React的Fragment标签有什么作用

React 中经常会遇到一个组件中 return 多个子组件的情况,举个简单的例子:

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

该情况下子组件 <Columns /> 需要返回 <td> 元素,父组件的表格才能正常显示。

如果在 <Columns />render() 中的最外层使用了 div ,就会出问题。

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

最终得到的 <Table /> 输出为:

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

这时候 <Fragment /> 标签就派上用场了。

Fragments 的作用

Fragments 可以作为一个标签使用,但不会向 DOM 添加额外节点。

用法:

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

这样可以正确的输出 <Table />

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

带 key 的 Fragments:

使用显式 <React.Fragment> 语法声明的片段支持使用 key 值。

一个使用场景是将一个集合映射到一个 Fragments 数组:

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // 没有`key`,React 会发出一个关键警告
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

目前 key 是唯一可以传递给 Fragment 的属性。未来 React 可能会添加对其他属性的支持,例如事件。

简单(新)语法:

也可以用空标签来代替,这是一种新的,且更简短的语法来声明 Fragments:

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

注意:空标签 <> </>,不支持 key 或属性。

未经允许不得转载:w3h5 » React的Fragment标签有什么作用

赞 (0)
分享到: +

评论 沙发

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)