JSX 要求组件返回的元素必须有唯一根元素,不允许多个根元素相邻。对于变量也是如此,一个变量不能存储多个相邻的根元素。
解决方法:
- 使用
<div></div>
,此方法不好,会产生 div soup,即代码里可能很多很多没有任何语义的 div,还可能干扰CSS styling。
<div>
<div>
<div>
<div>
<p> Something </p>
</div>
</div>
</div>
</div>
- 使用数组 [ , , ] 最外层的花括号{ }要移除,因为是在数组里, 但是每个数组元素要加 key,此方法麻烦。
- 自定义一个返回nothing的wrapper 组件,实质是一个空的组件,如下:
const Wrapper = props => {
return props.children;
}
export default Wrapper;
使用:
<Wrapper>
<MyComponent />
<MyComponent />
</Wrapper>
但是实现相同功能的空的组件,React 已有提供,即 React.Fragment
,可以直接使用,不需要自己写一个像上面的Wrapper:
return <React.Fragment>
// something else
</React.Fragment>
如果import {Fragment} , 上述写法还可以改成:
import {Fragment} from "react";
return <Fragment>
// something else
</Fragment>
然后 <React.Fragment> </React.Fragment>
的shortcut 写法是 <> </>
, 但是这种写法 <> </>
需要项目设置支持。所以任何情况下写成 <React.Fragment> </React.Fragment>
都是正确的。
简而言之,JSX 代码
return <div>
<myComponent />
<h2>...</h2>
</div>
应该改成:
return <React.Fragment>
<myComponent />
<h2>...</h2>
</React.Fragment>
为了防止出现多个根元素使用<div>
是不好的做法。