資訊專欄INFORMATION COLUMN
摘要：只有一個(gè)屬性，那就是栗子可展開(kāi)收縮的表格源碼展開(kāi)收起張三我很開(kāi)心李四我也很開(kāi)心王五我比張三和李四更開(kāi)心效果
0x001 引出問(wèn)題
讓我們先來(lái)看一個(gè)栗子：
class App extends React.Component {
render() {
return (
)
}
}
ReactDom.render(
上面的栗子中的render返回了兩個(gè)同級(jí)h1，編譯的時(shí)候?qū)?huì)看到一個(gè)報(bào)錯(cuò):
SyntaxError: index.js: Adjacent JSX elements must be wrapped in an enclosing tag.
jsx只能返回一個(gè)閉合的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
}
}
總的來(lái)說(shuō)，只能返回一個(gè)根元素，但是實(shí)際中總會(huì)遇到奇特的場(chǎng)景，希望可以返回多個(gè)，栗子：
class Td extends React.Component {
render() {
return (
1
2
)
}
}
class Table extends React.Component {
render() {
return 很明顯，會(huì)有語(yǔ)法錯(cuò)誤，修復(fù)：
class Td extends React.Component {
render() {
return (
1
2
)
}
}
查看效果：
多了一級(jí)，那真的沒(méi)辦法了嗎？當(dāng)然有了，就是Fragment了
class Td extends React.Component {
render() {
return (<>
1
2
)
}
}
將跟元素替換成<>...就行啦
當(dāng)然，這是一個(gè)縮寫(xiě)，完整的寫(xiě)法應(yīng)該是：
class Td extends React.Component {
render() {
return (
1
2
)
}
}
可展開(kāi)收縮的表格
源碼
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: "我很開(kāi)心"
},
{
name: "李四",
age: "22",
detail: "我也很開(kāi)心"
},
{
name: "王五",
age: "33",
detail: "我比張三和李四更開(kāi)心"
}
]
}
}
render() {
const {users} = this.state
return (
效果
dom
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/99523.html
摘要：概述和使用上類似，在特性上和類似，和相比，有一下特點(diǎn)不可枚舉的只能是對(duì)象是弱引用，內(nèi)的如果沒(méi)有引用，將會(huì)被垃圾回收機(jī)制回收初始化添加刪除包含弱引用特性后輸出一下內(nèi)容，數(shù)據(jù)消失了 0x000 概述 WeakMap和Map使用上類似，在特性上和Set類似，和Map相比，有一下特點(diǎn) 不可枚舉 WeakMap的key只能是對(duì)象 WeakMap是弱引用，WeakMap內(nèi)的key如果沒(méi)有引用...
摘要：分鐘學(xué)是一個(gè)系列，簡(jiǎn)單暴力，包學(xué)包會(huì)。一旦組件掛載后，會(huì)自動(dòng)進(jìn)行數(shù)據(jù)請(qǐng)求，前提是客戶端提供的和后端的相符。如果回調(diào)返回直接不作請(qǐng)求。在組件內(nèi)進(jìn)行分頁(yè)請(qǐng)求之前提到了，這個(gè)裝飾器為添加了對(duì)象，其中有個(gè)函數(shù)為。 21 分鐘學(xué) apollo-client 是一個(gè)系列，簡(jiǎn)單暴力，包學(xué)包會(huì)。 搭建 Apollo client 端，集成 redux使用 apollo-client 來(lái)獲取數(shù)據(jù)修改本...
摘要：分鐘學(xué)是一個(gè)系列，簡(jiǎn)單暴力，包學(xué)包會(huì)。搭建端，集成使用來(lái)獲取數(shù)據(jù)修改本地的數(shù)據(jù)提供定制方案請(qǐng)求攔截封裝修改的存儲(chǔ)細(xì)節(jié)寫(xiě)入的失敗原因分析和解決方案修改本地?cái)?shù)據(jù)之前我們已經(jīng)知道，我們可以在請(qǐng)求結(jié)束之后，通過(guò)自動(dòng)執(zhí)行的回調(diào)，修改。 21 分鐘學(xué) apollo-client 是一個(gè)系列，簡(jiǎn)單暴力，包學(xué)包會(huì)。 搭建 Apollo client 端，集成 redux使用 apollo-clien...
摘要：踩坑入門系列一二添加三目錄重構(gòu)再談路由陸續(xù)更新個(gè)人對(duì)于腳手架的有一種執(zhí)念，如果搭建出來(lái)就是一個(gè)首頁(yè)標(biāo)簽跳轉(zhuǎn)，實(shí)在不是我這個(gè)處女座的風(fēng)格，因此第二步我就想引用框架，相信很多使用的開(kāi)發(fā)者用的也都是這個(gè)框架吧。 Next.js踩坑入門系列 (一) Hello Next.js (二) 添加Antd && CSS (三) 目錄重構(gòu)&&再談路由 陸續(xù)更新... 個(gè)人對(duì)于腳手架的UI有一種執(zhí)...
摘要：概述也是，如是說(shuō)。屬性集合，比如等屬性對(duì)應(yīng)，是關(guān)鍵詞，所以用代替，也可以是自定義的屬性。形式送方外上人送上人孤云將野鶴，豈向人間住。莫買沃洲山，時(shí)人已知處。 0x000 概述 jsx也是js， 如是說(shuō)。 0x001 語(yǔ)法 在上文React入門0x001-環(huán)境配置和 helloworld中， 出現(xiàn)了一句奇怪的代碼： Hello, world! 這在html中沒(méi)有任何問(wèn)題，但問(wèn)題是他出現(xiàn)在...
閱讀 2060·2021-11-23 09:51
閱讀 3353·2021-09-28 09:36
閱讀 1120·2021-09-08 09:35
閱讀 1758·2021-07-23 10:23
閱讀 3258·2019-08-30 15:54
閱讀 2998·2019-08-29 17:05
閱讀 438·2019-08-29 13:23
閱讀 1294·2019-08-28 17:51
