04.md

React.Fragment

在 React 16 之前，在寫一個 component 時，因為回傳只能有一個 root node，所以常常會寫成以下的 code

render() {
    return (
        // 你需要在外面包一層 container 像是 <div>
        <div>
            <td>Hello</td>
            <td>World</td>
        </div>
    );
}

這會帶來一些問題

• 會多一個莫名其妙的 root node
• 可能會造成不合法的 HTML 結構

React 16.2 提供了 Fragment 功能，Fragment 讓你可以直接返回一組元素，而不需要增加多餘的 DOM 節點。 Fragment 的語法是使用 <React.Fragment>

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

或者是使用 React.Fragment 語法糖

class Columns extends React.Component {
    render() {
        return (
            <>
                <td>Hello</td>
                <td>World</td>
            </>
        );
    }
}

這樣輸出就不會有多餘的 div 了。

---

Reference

1. https://www.fooish.com/reactjs/fragment.html

tags: React Fragment

---