Fragments

作者: 木头猿 | 来源:发表于2018-07-31 15:00 被阅读0次

    在React中要求render函数返回值只能是一个标签,简单方式是通过在最外层包裹一个div来实现,而有时候div不能满足要求,React允许使用Fragments组件来作为最外层的包裹层,它只是一个包裹,最终渲染时不会影响整体的HTML结构。
    使用形式:

    <></>
    
    <React.Fragment>
    </React.Fragment>
    

    <></>是<React.Fragment/>的语法糖,但是不允许任何属性输入,所以如果是需要带属性的Fragments只能使用第二种方式
    例:

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

    最终结果

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

    相关文章

      网友评论

          本文标题:Fragments

          本文链接:https://www.haomeiwen.com/subject/prccvftx.html