[进阶指南] Fragments（ Day23 ）

React 其中一种常见的使用情况是在一个 component 中回传多个 element，fragment 让你能够在不用增加额外 DOM 节点的情况下，重新组合 child component。

fragment 写法：

1. <React.Fragment></React.Fragment> //只支援 key attribute
2. 缩写写法 <></> //不支援 key attribute

在写一个元件的时候，必须在最外层包裹单一元素，但并不是每一次都会想要用一个实体的元素。以下举例：

function Article(props) {
 return <div> //不想多包一层 div
   <h3>Title{props.id}</h3>
   <p>content{props.id}</p>
 <div/>
}
  
function Book() {
    return (
      <ul>
       {
         [1, 2, 3].map((item) => {
                  return (
                    <li>
                      <Article id={item} />
                    </li>
                  )
          })
        
       }
      </ul>
     );
}
//略

可以用 React 提供的 <React.Fragment> 进行替代，功用有点像其他框架的 <template></template>，而 <React.Fragment> 也可以使用缩写 <></>

<React.Fragment> 使用 key attribute 的例子

function BookLists(props) {
  return (
      <table>
        <thead>
            <tr>
                <th colspan="2">我的书单</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                {props.items.map(item => (
                    <React.Fragment key={item.isbn}>
                      <td>{item.name}</td>
                      <td>{item.author}</td>
                    </React.Fragment>
                  ))}
            </tr>
        </tbody>
    </table>
  );
}

Codepen 完整程序码

以上一个简单介绍。

参考资料：
https://zh-hant.reactjs.org/docs/fragments.html