摘要：只有一个属性，那就是栗子可展开收缩的表格源码展开收起张三我很开心李四我也很开心王五我比张三和李四更开心效果
0x001 引出问题
让我们先来看一个栗子：
class App extends React.Component {
render() {
return (
)
}
}
ReactDom.render(
,
document.getElementById("app")
) 上面的栗子中的render返回了两个同级h1，编译的时候将会看到一个报错:
SyntaxError: index.js: Adjacent JSX elements must be wrapped in an enclosing tag.jsx只能返回一个闭合的tag，比如
class App extends React.Component {
render() {
return
}
}或者：
class App extends React.Component {
render() {
return "helloworld"
}
}又或者：
class App extends React.Component {
render() {
return
title
content
}
}总的来说，只能返回一个根元素，但是实际中总会遇到奇特的场景，希望可以返回多个，栗子：
class Td extends React.Component {
render() {
return (
1
2
)
}
}
class Table extends React.Component {
render() {
return
}
}很明显，会有语法错误，修复：
class Td extends React.Component {
render() {
return (
1
2
)
}
}查看效果：
多了一级，那真的没办法了吗？当然有了，就是Fragment了
class Td extends React.Component {
render() {
return (<>
1
2
)
}
}将跟元素替换成<>...就行啦
当然，这是一个缩写，完整的写法应该是：
class Td extends React.Component {
render() {
return (
1
2
)
}
}
可展开收缩的表格
源码
class Tr extends React.Component {
constructor(props) {
super(props);
this.state = {
extend: false
}
}
render() {
const {extend} = this.state
const {data} = this.props
return (
<>
this.handleExtend()}>
{data.name}
{data.age}
{
extend ?
{data.detail}
: null
}
);
}
handleExtend() {
this.setState({
extend: !this.state.extend
})
}
}
class Table extends React.Component {
constructor() {
super()
this.state = {
users: [
{
name: "张三",
age: "11",
detail: "我很开心"
},
{
name: "李四",
age: "22",
detail: "我也很开心"
},
{
name: "王五",
age: "33",
detail: "我比张三和李四更开心"
}
]
}
}
render() {
const {users} = this.state
return (
{
users.map((u, i) => )
}
);
}
}
ReactDom.render(
,
document.getElementById("app")
效果
dom
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/99523.html
相关文章
-
es6基础0x014：WeakMap
摘要：概述和使用上类似，在特性上和类似，和相比，有一下特点不可枚举的只能是对象是弱引用，内的如果没有引用，将会被垃圾回收机制回收初始化添加删除包含弱引用特性后输出一下内容，数据消失了
0x000 概述
WeakMap和Map使用上类似，在特性上和Set类似，和Map相比，有一下特点
不可枚举
WeakMap的key只能是对象
WeakMap是弱引用，WeakMap内的key如果没有引用...
-
21 分钟学 apollo-client 系列：获取数据
摘要：分钟学是一个系列，简单暴力，包学包会。一旦组件挂载后，会自动进行数据请求，前提是客户端提供的和后端的相符。如果回调返回直接不作请求。在组件内进行分页请求之前提到了，这个装饰器为添加了对象，其中有个函数为。
21 分钟学 apollo-client 是一个系列，简单暴力，包学包会。
搭建 Apollo client 端，集成 redux使用 apollo-client 来获取数据修改本...
-
21 分钟学 apollo-client 系列：修改本地 store 数据
摘要：分钟学是一个系列，简单暴力，包学包会。搭建端，集成使用来获取数据修改本地的数据提供定制方案请求拦截封装修改的存储细节写入的失败原因分析和解决方案修改本地数据之前我们已经知道，我们可以在请求结束之后，通过自动执行的回调，修改。
21 分钟学 apollo-client 是一个系列，简单暴力，包学包会。
搭建 Apollo client 端，集成 redux使用 apollo-clien...
-
Next.js踩坑入门系列（二）— 添加Antd && CSS
摘要：踩坑入门系列一二添加三目录重构再谈路由陆续更新个人对于脚手架的有一种执念，如果搭建出来就是一个首页标签跳转，实在不是我这个处女座的风格，因此第二步我就想引用框架，相信很多使用的开发者用的也都是这个框架吧。
Next.js踩坑入门系列
(一) Hello Next.js
(二) 添加Antd && CSS
(三) 目录重构&&再谈路由
陆续更新...
个人对于脚手架的UI有一种执...
-
React入门0x002: jsx
摘要：概述也是，如是说。属性集合，比如等属性对应，是关键词，所以用代替，也可以是自定义的属性。形式送方外上人送上人孤云将野鹤，岂向人间住。莫买沃洲山，时人已知处。
0x000 概述
jsx也是js， 如是说。
0x001 语法
在上文React入门0x001-环境配置和 helloworld中， 出现了一句奇怪的代码：
Hello, world!
这在html中没有任何问题，但问题是他出现在...
发表评论
0条评论
forrest23
男|高级讲师
TA的文章
阅读更多
Java--String--方法大全
阅读 2109·2021-11-23 09:51
[初识C++] 何为最：心酸历史
阅读 3388·2021-09-28 09:36
【软件测试】三种方法让你快速优化回归测试
阅读 1206·2021-09-08 09:35
UCloud，阿里云，腾讯云的云与轻量服务器：个人开发者该如何对比选择?
阅读 1835·2021-07-23 10:23
【专栏第一篇】分享实用美国求职，面试经历，技巧，以及超实用网站
阅读 3324·2019-08-30 15:54
小程序初始认识
阅读 3037·2019-08-29 17:05
我遇到的前端面试题2017
阅读 488·2019-08-29 13:23
常用 CSS 中文字体 Unicode 编码表
阅读 1335·2019-08-28 17:51
最新活动
企业采购季！
极致性价比！云服务器续费无忧！
多种GPU机型限时特惠
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起，不限台数，续费同价。
GPU算力平台
NVIDIA RTX 40系，高性价比推理显卡，满足AI应用场景需要。
高等级、高电力的数据中心托管服务
乌兰察布+上海青浦，满足东推西训AI场景需要
阅读需要支付1元查看
<
