当前位置: 首页> 游戏> 网游 > React <> </>的用法

React <> </>的用法

时间:2025/7/9 7:49:23来源:https://blog.csdn.net/weixin_45705239/article/details/139675739 浏览次数:0次

React <> </>的用法

  • 介绍
  • 为什么使用 <>?
    • 例子
    • 解释
  • 关于顶级元素
  • 总结

介绍

在 React 中,使用 <> 表示一个空标签或片段(Fragment),这是一个简洁的方式来包裹一组子元素而不在 DOM 树中添加额外的节点。空标签在 JSX 语法中是一种简写形式,相当于 React.Fragment。它的主要作用是允许你在不引入额外 DOM 元素的情况下返回多个子元素。

为什么使用 <>?

  • 减少不必要的 DOM 元素:如果你只是想包裹一组元素而不希望在 DOM 树中添加额外的
    或 标签,可以使用片段。
  • 提高可读性:它使得 JSX 结构更清晰,避免了嵌套过多的容器元素。
  • 保持语义:有时候,添加额外的元素会影响 HTML 的语义结构,而片段不会引入任何实际的 HTML 标签,从而保持页面的语义性。

例子

在你的代码中,使用了一个片段来包裹多行 JSX:

return (<><>GUI v{gui_version}</>{Object.entries(server_version ?? {}).map(([key, value]) => (<span key={key}><Divider type="vertical" />{key}&nbsp;{value}</span>))}<Tabstype={'editable-card'}onChange={onChange}activeKey={activeTab}onEdit={onEdit}items={tabs.map(({ label, tab_id }) => ({label,key: tab_id,children: <SimulationContainer key={tab_id} tab_id={tab_id} />}))}tabBarExtraContent={{right: (<Space size="small"><Dropdown menu={{ items }} placement="bottomRight"><Button size="small"><SettingOutlined /></Button></Dropdown></Space>)}}/></>
)

解释

最外层的 <>…</>:

这是一个片段,包裹了整个返回内容,使得可以在不引入额外 DOM 元素的情况下返回多个顶级元素。
内层的 <>GUI v{gui_version}</>:

这是一个片段,包裹了 GUI v{gui_version} 文本。这在这种情况下其实没有必要,因为文本本身就是一个单独的元素,可以直接返回,不需要片段包裹。不过,这样写不会有任何副作用,只是多余了。
优化建议
如果内层的片段没有特殊用途,可以直接移除它,简化代码:

return (<>GUI v{gui_version}{Object.entries(server_version ?? {}).map(([key, value]) => (<span key={key}><Divider type="vertical" />{key}&nbsp;{value}</span>))}<Tabstype={'editable-card'}onChange={onChange}activeKey={activeTab}onEdit={onEdit}items={tabs.map(({ label, tab_id }) => ({label,key: tab_id,children: <SimulationContainer key={tab_id} tab_id={tab_id} />}))}tabBarExtraContent={{right: (<Space size="small"><Dropdown menu={{ items }} placement="bottomRight"><Button size="small"><SettingOutlined /></Button></Dropdown></Space>)}}/></>
)

这样更简洁和直观。

关于顶级元素

假设你有一个 App 组件,它引用了你定义的 SimulationTabs 组件:

import React from 'react';
import SimulationTabs from './SimulationTabs';function App() {return (<div className="App"><h1>Welcome to the Simulation App</h1><SimulationTabs /></div>);
}export default App;

在这个例子中,SimulationTabs 组件会在 DOM 树中直接插入到

内部:

<div class="App"><h1>Welcome to the Simulation App</h1><!-- SimulationTabs component content will be here -->
</div>

SimulationTabs 组件的渲染内容
假设 SimulationTabs 组件返回的 JSX 如下:

return (<>GUI v{gui_version}{Object.entries(server_version ?? {}).map(([key, value]) => (<span key={key}><Divider type="vertical" />{key}&nbsp;{value}</span>))}<Tabstype={'editable-card'}onChange={onChange}activeKey={activeTab}onEdit={onEdit}items={tabs.map(({ label, tab_id }) => ({label,key: tab_id,children: <SimulationContainer key={tab_id} tab_id={tab_id} />}))}tabBarExtraContent={{right: (<Space size="small"><Dropdown menu={{ items }} placement="bottomRight"><Button size="small"><SettingOutlined /></Button></Dropdown></Space>)}}/></>
);

当 SimulationTabs 组件被渲染时,它的内容会替代 App 组件中引用 的位置。渲染后的 DOM 结构如下:`

<div class="App"><h1>Welcome to the Simulation App</h1>GUI v1.0.0<span><span class="ant-divider ant-divider-vertical"></span>backend &nbsp; 1.0.0</span><span><span class="ant-divider ant-divider-vertical"></span>frontend &nbsp; 2.1.0</span><div class="ant-tabs ant-tabs-editable-card"><!-- Content of Tabs component --><button class="ant-btn ant-btn-sm"><span class="anticon anticon-setting"><svg>...</svg></span></button></div>
</div>

总结

顶级元素:React 组件必须返回一个单一的顶级元素,可以是一个实际的 HTML 元素(如 div、span)或一个 React.Fragment(用 <>…</> 简写)。
组件引用:当一个组件在另一个组件中被引用时,它的渲染内容会直接插入到引用点所在的 DOM 结构中。
保持结构清晰:使用 React.Fragment 可以避免在 DOM 中引入不必要的包裹元素,从而保持 HTML 结构清晰和语义正确。

关键字:React <> </>的用法

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: