React开发中常见的模式之一是将多个元素返回一个组件,Fragments允许您聚合一个子元素列表,并且不会在DOM中添加额外的节点。会Vue的朋友当然会发现,它看起来和Vue的template非常相似,都可以用来表示一个空节点。但这和Vue的temlate还是有一点不同的,我们都知道,Vue的组件template内的子级只有一个节点,而react的Fragments子级可以有多个节点,因此这两者的区别也是正式的。
首先,先来看一个示例。
//Columnsclass Columns extends React.Component { render() { return ( <div> <td>Hello</td> <td>World</td> </div> ); } }//Tableclass Table extends React.Component { render() { return ( <table> <tr> <Columns /> </tr> </table> ); } }123456789101112131415161718192021222324复制代码类型:[javascript]
可以看到,在table组件tr中,渲染了Columns组件,而最终的输出是这样的。
<table> <tr> <div> <td>Hello</td> <td>World</td> </div> </tr> </table>12345678复制代码类型:[python]
根据上方输出结构可以看到,tr下面多了一个div,造成了dom结构出现了非法嵌套,最终HTML将会是无效的。而这并不是我们想要的,所以Fragments的出现就是为了解决这样的问题。
我们就上方的示例进行更改
//Columnsclass Columns extends React.Component { render() { return ( <React.Fragment> <td>Hello</td> <td>World</td> </React.Fragment> ); } }//Tableclass Table extends React.Component { render() { return ( <table> <tr> <Columns /> </tr> </table> ); } }123456789101112131415161718192021222324复制代码类型:[javascript]
最终输出
<table> <tr> <td>Hello</td> <td>World</td> </tr></table>123456复制代码类型:[javascript]
如果你觉得上方语法还是比较麻烦,不用着急,jsx提供了一个简写语法,示例如下:
//Columnsclass Columns extends React.Component { render() { return ( <> <td>Hello</td> <td>World</td> </> ); } }1234567891011复制代码类型:[javascript]
你可以像使用其他元素一样使用<></>,不过它不支持键值或属性。
请注意,目前许多工具都不支持这个简写语法,所以你可能需要明确地使用<React.Fragment>,直到工具支持这个语法。
带key的Fragments
function Glossary (props) { return ( <dl> {props.items.map(item => ( // 没有`key`,将会触发一个key警告 <React.Fragment key={item.id}> <dt>{item.term}</dt> <dd>{item.description}</dd> </React.Fragment> ))} </dl> ); }12345678910111213复制代码类型:[javascript]
key是唯一可以传递给Fragment的属性。未来,可能增加额外的属性支持,比如事件处理等。
联系客服