React入門0x014: Fragment

forrest23 發布于2019-08-23 13:46 / 2993人閱讀

摘要：只有一個屬性，那就是栗子可展開收縮的表格源碼展開收起張三我很開心李四我也很開心王五我比張三和李四更開心效果

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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