React文檔篇 - Fragement

React 中的一個常見模式是一個組件返回多個元素。Fragments 容許你將子列表分組，而無需向 DOM 添加額外節點。

• 簡寫用<></>表示，不能帶key
• React.Fragement 能夠且僅能夠帶key
• 經常使用來避免增長無心義的div標籤或使用for循環致使破壞htm元素像tr/td， select/option之類的結構

基本用法

class Table extends React.Component {
  render() {
    return (
      <table> <tr> <Columns /> </tr> </table>
    );
  }
}

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment> <td>Hello</td> <td>World</td> </React.Fragment> ); } } 複製代碼

帶 key 的 Fragments

使用顯式 <React.Fragment> 語法聲明的片斷可能具備 key

function Glossary(props) {
  return (
    <dl> {props.items.map(item => ( // 沒有`key`，React 會發出一個關鍵警告 <React.Fragment key={item.id}> <dt>{item.term}</dt> <dd>{item.description}</dd> </React.Fragment> ))} </dl> ); } 複製代碼