React的Fragment解决不必要的元素嵌套问题

一、解决了什么问题？

在不额外创建 DOM 元素的情况下，让 render() 方法中返回多个元素，减少不必要的元素嵌套。

---

二、用法说明

1、问题

下面的 Table 不能正常渲染，原因是 Colums 中夹杂了 <div> 元素。

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

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

---

2、fragment解决方案

用 React.Fragment 修改上面的 Columns 组件，即可正确渲染 table 。

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

---

3、短语法

React.Fragment 还有另外一种写法 <></> 。

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

---

4、key属性

目前 key 是唯一能传递给 React.Fragment 的属性。

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

---

三、参考链接：

• React的Fragment解决不必要的元素嵌套问题！