React入门0x014: Fragment

forrest23 发布于2019-08-23 13:46 / 3010人阅读

摘要：只有一个属性，那就是栗子可展开收缩的表格源码展开收起张三我很开心李四我也很开心王五我比张三和李四更开心效果

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了

0x002 Fragment

class Td extends React.Component {
    render() {
        return (<>
            1
            2
        )
    }
}

将跟元素替换成<>...就行啦

当然，这是一个缩写，完整的写法应该是：

class Td extends React.Component {
    render() {
        return (
            1
            2
        )
    }
}

效果和<>是一致的但是有一点区别就是React.Fragment是可以有属性的，而<>无法拥有属性。

只有一个属性，那就是key

0x003 栗子

可展开收缩的表格

源码

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

GPU云服务器云服务器 fragment嵌套fragment Fragment fragment 筛选安卓 fragment

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99523.html

es6基础0x014：WeakMap

摘要：概述和使用上类似，在特性上和类似，和相比，有一下特点不可枚举的只能是对象是弱引用，内的如果没有引用，将会被垃圾回收机制回收初始化添加删除包含弱引用特性后输出一下内容，数据消失了 0x000 概述 WeakMap和Map使用上类似，在特性上和Set类似，和Map相比，有一下特点不可枚举 WeakMap的key只能是对象 WeakMap是弱引用，WeakMap内的key如果没有引用...

luzhuqun 2019-08-23 13:09 评论0 收藏0
21 分钟学 apollo-client 系列：获取数据

摘要：分钟学是一个系列，简单暴力，包学包会。一旦组件挂载后，会自动进行数据请求，前提是客户端提供的和后端的相符。如果回调返回直接不作请求。在组件内进行分页请求之前提到了，这个装饰器为添加了对象，其中有个函数为。 21 分钟学 apollo-client 是一个系列，简单暴力，包学包会。搭建 Apollo client 端，集成 redux使用 apollo-client 来获取数据修改本...

robin 2019-08-22 11:10 评论0 收藏0
21 分钟学 apollo-client 系列：修改本地 store 数据

摘要：分钟学是一个系列，简单暴力，包学包会。搭建端，集成使用来获取数据修改本地的数据提供定制方案请求拦截封装修改的存储细节写入的失败原因分析和解决方案修改本地数据之前我们已经知道，我们可以在请求结束之后，通过自动执行的回调，修改。 21 分钟学 apollo-client 是一个系列，简单暴力，包学包会。搭建 Apollo client 端，集成 redux使用 apollo-clien...

617035918 2019-08-22 11:10 评论0 收藏0
Next.js踩坑入门系列（二）— 添加Antd && CSS

摘要：踩坑入门系列一二添加三目录重构再谈路由陆续更新个人对于脚手架的有一种执念，如果搭建出来就是一个首页标签跳转，实在不是我这个处女座的风格，因此第二步我就想引用框架，相信很多使用的开发者用的也都是这个框架吧。 Next.js踩坑入门系列 (一) Hello Next.js (二) 添加Antd && CSS (三) 目录重构&&再谈路由陆续更新... 个人对于脚手架的UI有一种执...

lifesimple 2019-08-23 11:38 评论0 收藏0
React入门0x002: jsx

摘要：概述也是，如是说。属性集合，比如等属性对应，是关键词，所以用代替，也可以是自定义的属性。形式送方外上人送上人孤云将野鹤，岂向人间住。莫买沃洲山，时人已知处。 0x000 概述 jsx也是js，如是说。 0x001 语法在上文React入门0x001-环境配置和 helloworld中，出现了一句奇怪的代码： Hello, world! 这在html中没有任何问题，但问题是他出现在...

hedzr 2019-08-26 12:17 评论0 收藏0