1、在 React 中,render 函数中 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 啦