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>);}
}