React —— 使用Fragments不增DOM节点返回多个子节点

Fragments

React中的一个常见模式是一个组件返回多个元素。Fragments允许你将字列表分组，而无需向DOM添加额外的子节点。

class App extends React.Component{
    render(){
        return  <React.Fragment>
            <div></div>
            <div></div>
            <div></div>
        </React.Fragment>
    }
}

动机

一种常见模式是组件返回一个子元素列表，例如在表格中：

class App extends React.Component {
    render () {
        let tableData = [1, 2, 3, 4,];
        return <table>
            <tr>
                 <Columns></Columns>
            </tr>
        </table>
    }
}

class  Columns extends React.Component {
    render (){
        return  <React.Fragment>
            {tableData.map(value => <td>{value}</td>)}
        </React.Fragment>
    }
}

带key的Fragments

使用显示<React.Fragment>语法声明的片段可能具有key。一个使用场景是将一个集合映射到一个Fragments数据。

function Glossary (props) {
    return (
        <dl>
            {
                props.items.map(item => {
                    <React.Fragment key={item.id}>
                        <dt>{item.name}</dt>
                        <dd>{item.des}</dd>
                    </React.Fragment>
                })
            }
        </dl>
    )
}

key是唯一可以传递给Fragment的属性。