码迷,mamicode.com
首页 > 其他好文 > 详细

React.Fragment解决return中用div包裹的问题

时间:2019-08-07 19:00:12      阅读:304      评论:0      收藏:0      [点我收藏+]

标签:标题   inf   mic   pre   react   roo   xtend   one   常用   

1、在 React 中,return 的内容只能有一个根节点,需要一个包裹元素

这个包裹元素通常用 div,示例如下:

class App extends Component {
  render() {
    return (
      <div>
          <h1>大标题</h1>
          <h2>小标题</h2>
        </div>
    );
  }
}

此时 #root 下的结构:

技术图片

 

2、如果不加 div,会报错 

示例如下:

class App extends Component {
  render() {
    return (
      <h1>大标题</h1>
          <h2>小标题</h2>
    );
  }
}

技术图片

 

3、不加 div 的解决办法:用 React.Fragment 替代

示例如下:

class App extends Component {
  render() {
    return (
      <React.Fragment>
          <h1>大标题</h1>
          <h2>小标题</h2>
        </React.Fragment>
    );
  }
}

此时 #root 下的结构就不会多出一个“烦人”的 div 啦

技术图片

 

React.Fragment解决return中用div包裹的问题

标签:标题   inf   mic   pre   react   roo   xtend   one   常用   

原文地址:https://www.cnblogs.com/Leophen/p/11316829.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!