生活随笔
收集整理的這篇文章主要介紹了
21 Fragment和短语法应用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
React.Fragment
- jsx語法，相當于document.createDocumentFragment()
- 創建文檔碎片容器，優化渲染
- 解決了沒有根節點的問題
- <></>這種短語法也會聲明React.Fragment
- 但短語法不支持key
- React.Fragment只支持key屬性，其余屬性如事件等不支持
export default class Table extends React.Component
{render() {return (<table border
="1"><caption
>Private Information
</caption
><thead
><tr
><TableHeaders
/></tr
></thead
><tbody
><tr
><TableCells
/></tr
></tbody
></table
>)}
}
class TableHeaders extends React.Component
{state
= {headers
: ['Name','ID','Age']}render() {return (<React
.Fragment
>{this.state
.headers
.map((item
, index
) => {return (<th key
={index
}>{item
}</th
>)})}</React
.Fragment
>)}
}class TableCells extends React.Component
{state
= {headers
: ['Jessica','1','18']}render() {return (<React
.Fragment
>{this.state
.headers
.map((item
, index
) => {return (<th key
={index
}>{item
}</th
>)})}</React
.Fragment
>)}
}
export default class MemberList extends React.Component
{state
= {list
: [{id
: 1,name
: 'Yonna',desc
: '主舞'},{id
: 2,name
: 'Jessica',desc
: '主唱'},{id
: 3,name
: 'Krystal',desc
: '忙內'},]}render() {return (<dl
>{this.state
.list
.map(({ id
, name
, desc
}) =><React
.Fragment key
={id
}><dt
>{id
}:{name
}</dt
><dd
>{desc
}</dd
></React
.Fragment
>)}</dl
>);}
}
總結
以上是生活随笔為你收集整理的21 Fragment和短语法应用的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
