React Fragments

最新推荐文章于 2023-12-07 20:56:42 发布

小公鸡卡哇伊呀~

最新推荐文章于 2023-12-07 20:56:42 发布

阅读量138

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/ftell/article/details/122423055

版权

JSX 要求组件返回的元素必须有唯一根元素，不允许多个根元素相邻。对于变量也是如此，一个变量不能存储多个相邻的根元素。
解决方法：

    <div>
      <div>
        <div>
          <div>
            <p> Something </p>
          </div>
        </div>
      </div>
    </div>

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> 是不好的做法。

关注