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