react的(片段)碎片,一篇文章就够了

React.Fragment 的作用:代替div作为外层

要在render()中,同时返回多个元素,可以使用碎片
可以使用<React.Fragment></React.Fragment>
在 Vue 里,我们会用 标签来包裹一些不能有父容器的复数同级标签。

比如在 标签中,我们只能放置

    标签,假如我们同时有多个
    • 标签被赋值给一个 JSX 变量,那么在 React 里也有类似的功能:<React.Fragment> 标签。
    • import React from 'react'
      function Qfmodel(props){
          return(
              <div><h3>model</h3></div>
          )
      }
      function Qfmodel2(props){
          return(
              <div><h3>model2</h3></div>
          )
      }
      // export default class Fragment extends React.Component{
      //     // render(
      //     //    <div></div> 没有return
      //     // )
      //     // <MyDialog></MyDialog>
      //     // <MyDialog></MyDialog> 两个组件,不能同时并列返回,返回多个元素,要用react内置的多个元素
      //     render(){
      //         return(
      //             // React.Fragment,可以抛出多个元素,可以返回多个元素,片段
      //             <React.Fragment>
      //               {/* <MyDialog></MyDialog> */}
      //               <Qfmodel></Qfmodel>
      //               <Qfmodel2></Qfmodel2>
      //             </React.Fragment>
      //         )
      //     }
      // }
      // 片段的第二种写法
      export default class Fragment extends React.Component{
          // render(
          //    <div></div> 没有return
          // )
          // <MyDialog></MyDialog>
          // <MyDialog></MyDialog> 两个组件,不能同时并列返回,返回多个元素,要用react内置的多个元素
          render(){
              return(
                  // React.Fragment,可以抛出多个元素,可以返回多个元素,片段
                  <>
                    {/* <MyDialog></MyDialog> */}
                    <Qfmodel></Qfmodel>
                    <Qfmodel2></Qfmodel2>
                  </>
              )
          }
      }
      // 在同一的出口,把它抛出去
      
      
    ©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页