Fragment

• 开发中我们总是在一个组件中返回内容时包裹一个 div 元素,这个包裹的 div 元素在渲染的时候是会被渲染出来的,有时候我们又希望可以不渲染这样一个 div 应该如何操作呢?

• 使用 Fragment;
• Fragment 允许你将子列表分组,而无需向 DOM 添加额外节点;

 render() {
    return (
      <Fragment>
        <h2>H2 标题</h2>
        <button >btn</button>
        <div>
            <p>p 标签</p>
        </div>
      </Fragment>
    )
  }

• React 还提供了 Fragment 的短语法, 看起来像是空标签<> , 但是如果我们需要在 Fragment 中添加任何属性,那么就不能使用短语法

 render() {
    return (
      <>
        <h2>H2 标题</h2>
        <button >btn</button>
        <div>
            <p>p 标签</p>
        </div>
      </>
    )
  }