Fragments

场景一：

xxxxxxxxxx
render() {
    return (
      <p></p>
      <p></p>
    )
  }

提示：

react当中，组件的界面只能有一个根标签。

场景二：

xxxxxxxxxx
render() {
    return (
        // 最外层的这个div可能根本不需要，不想让它渲染到页面上
        <div>
             <p></p>
             <p></p>
        </div>
     
    )
  }

• Fragments 允许你将子元素包裹在一起，而无需向 DOM 添加额外节点。

xxxxxxxxxx
render() {
    return (
   <React.Fragment>
      <p></p>
      <p></p>
   </React.Fragment>
    )
  }

最终页面渲染结果：

• Fragments短语法

  使用<></>代替<React.Fragment></React.Fragment>

  xxxxxxxxxx
  render() {
      return (
     <>
        <p></p>
        <p></p>
     </>
      )
    }
  

提示：

因为Fragments最终不会被渲染为DOM，所以不要在Framents上面绑定事件或者设置一些其它属性，目前只支持设置key属性。

实时效果反馈

1. 下面关于Fragments说法错误的是：

A Fragments中间可以嵌套其它元素

B 其它元素中间可以嵌套Framents元素

C Fragments最终会被渲染为DOM

D Fragments不会被渲染为DOM

答案

1=>C