React技巧之组件中返回多个元素
2023-02-18 16:41:36 时间
原文链接:https://bobbyhadz.com/blog/react-return-multiple-elements
正文从这开始~
fragment
使用React fragment
从组件中返回多个元素。比如说,<><div>First</div><div>Second</div></>
,当我们需要在不向DOM添加额外节点的情况下,对一个子元素列表进行分组时,就会用到React Fragments。
export default function App() {
return (
<>
<div>First</div>
<div>Second</div>
</>
);
}
我们使用了一个Reactfragment
来分组一个子元素的列表,而没有向DOM添加额外的节点。
该截图显示,我们的相邻
div
元素已经被添加到DOM中,而没有被包裹在一个额外的DOM节点中。
你也可能会看到更多的fragments
语法。
import React from 'react';
export default function App() {
return (
<React.Fragment>
<div>First</div>
<div>Second</div>
</React.Fragment>
);
}
上面的两个示例会取得相同的结果。他们都对一个子元素的列表进行分组,而没有向DOM添加额外的节点。
现在大多数代码编辑器都支持更简明的语法,所以更常用。
然而需要注意的是,如果你必须要给fragment
传递key
属性,你就必须使用更为详细的语法。
import React from 'react';
export default function App() {
const arr = ['First', 'Second'];
return arr.map(element => {
return (
<React.Fragment key={element}>
<div>{element}</div>
</React.Fragment>
);
});
}
如果你使用了简写fragment
语法<> </>
,你将无法给fragment
传递任何属性。
DOM
另一种解决方案是将子元素包裹在另一个DOM元素中,例如
div
。
export default function App() {
return (
<div>
<div>First</div>
<div>Second</div>
</div>
);
}
这样就会解决无法传递属性的问题。因为我们没有返回多个元素,而是返回一个包含多个子元素的div
元素。
在React组件中,我们必须只返回单个元素。因为从函数中返回多个值是无效语法。
React组件只是函数,所以当我们在同一级别返回多个元素时,我们实际上是在函数的同一级别使用多个return
语句。
function render() {
return React.createElement('div', null, 'First');
return React.createElement('div', null, 'Second');
}
第二个return
语句是不可达的,并且属于无效语法。
另一方面,当我们使用fragment
或者其他元素来包裹元素时,该函数只返回一个带有多个子元素的单一值,这样便解决了错误。
相关文章
- Vue&Element 前端应用开发之菜单和路由的关系
- 在微信框架模块中,基于Vue&Element前端的微信公众号和企业微信的用户绑定
- 在微信框架模块中,基于Vue&Element前端的事件和内容的管理
- 在微信框架模块中,基于Vue&Element前端的后台管理功能介绍
- 使用DevExpress的GridControl实现多层级或无穷级的嵌套列表展示
- 在微信框架模块中,基于Vue&Element前端,通过动态构建投票选项,实现单选、复选的投票操作
- 使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理
- 利用查询条件对象,在Asp.net Web API中实现对业务数据的分页查询处理
- 利用过滤器Filter和特性Attribute实现对Web API返回结果的封装和统一异常处理
- 使用代码生成工具快速开发ABP框架项目
- 基于ABP框架的SignalR,使用Winform程序进行功能测试
- 如何快速开发Winform应用系统
- 看图知义,Winform开发的技术特点分析
- 循序渐进VUE+Element 前端应用开发(33)--- 邮件参数配置和模板邮件发送处理
- 循序渐进VUE+Element 前端应用开发(32)--- 手机短信动态码登陆处理
- ABP框架中短信发送处理,包括阿里云短信和普通短信商的短信发送集成
- 循序渐进VUE+Element 前端应用开发(31)--- 系统的日志管理,包括登录日志、接口访问日志、实体变化历史日志
- 一个人的思想:漫谈技术社区
- IDDD 实现领域驱动设计-由贫血导致的失忆症
- ASP.NET MVC 6 一些不晓得的写法