Fragment 和 短语法

22Fragment和短语法/App.jsx

import Table from './Table';
class App extends React.Component {
  render() {
    return (
      <Table />
    )
  }
}
ReactDOM.render(<App />, document.getElementById('app'));

Fragment 场景：

tr、th 元素需要拆分，把 th 拆成组件，但由于组件需要根元素，一般会用 div 包裹，然而 th 不能作为子元素出现在 div 下，此时，就需要类似 DOM 的 document.createDocumentFragment 的方案，用临时“容器”组装 th，最后再放进 tr 里

Fragment 有简写形式，叫「短语法」: <>...</> ，它会声明一个 React.Fragment

注意点：

• Fragment: 除了 key 属性，不支持其他任何属性
• 短语法: 不支持 key

22Fragment和短语法/Table.jsx

class Table extends React.Component {
  state = {
    headers: [
      'Name',
      'Id',
      'Age'
    ],
    info: [
      'Lance',
      123123123,
      26
    ]
  }
  render() {
    return (
      <table border="1">
        <caption>Private Information</caption>
        <thead>
          <tr>
            <TableHeaders headers={ this.state.headers } />
          </tr>
        </thead>
        <tbody>
          <tr>
            <TableCells info={ this.state.info } />
          </tr>
        </tbody>
      </table>
    )
  }
}
class TableHeaders extends React.Component {

  render() {
    return (
      // 用 div 包裹，会导致React报警告：
      // validateDOMNesting(...): <th> cannot appear as a child of <div>.
      // 所以我们可以用 React.Fragment 代替
      // <div>
      //   {
      //     this.props.headers.map((item, index) => {
      //       return (
      //         <th key={ index }>{ item }</th>
      //       )
      //     })
      //   }
      // </div>
      <React.Fragment>
        {
          this.props.headers.map((item, index) => {
            return (
              <th key={ index }>{ item }</th>
            )
          })
        }
      </React.Fragment>
    )
  }
}
class TableCells extends React.Component {
  render() {
    return (
      <>
        {
          this.props.info.map((item, index) => {
            return (
              <td key={ index }>{ item }</td>
            )
          })
        }
      </>
    )
  }
}
export default Table;