React 中的一個常見模式是一個組件返回多個元素。Fragments 允許你將子列表分組,而無需向 DOM 添加額外節點。
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}
還有一種新的短語法可用於聲明它們。
動機
一種常見模式是組件返回一個子元素列表。以此 React 代碼片段爲例:
class Table extends React.Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
}
<Columns />
需要返回多個 <td>
元素以使渲染的 HTML 有效。如果在 <Columns />
的 render()
中使用了父 div,則生成的 HTML 將無效。
class Columns extends React.Component {
render() {
return (
<div>
<td>Hello</td>
<td>World</td>
</div>
);
}
}
得到一個 <Table />
輸出:
<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>
Fragments 解決了這個問題。
用法
class Columns extends React.Component {
render() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
);
}
}
這樣可以正確的輸出 <Table />
:
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
短語法
你可以使用一種新的,且更簡短的語法來聲明 Fragments。它看起來像空標籤:
class Columns extends React.Component {
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</>
);
}
}
你可以像使用任何其他元素一樣使用 <> </>
,除了它不支持 key 或屬性。
帶 key 的 Fragments
使用顯式 <React.Fragment>
語法聲明的片段可能具有 key。一個使用場景是將一個集合映射到一個 Fragments 數組 - 舉個例子,創建一個描述列表:
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>
);
}
key
是唯一可以傳遞給 Fragment
的屬性。未來我們可能會添加對其他屬性的支持,例如事件。
經典前端面試題每日更新,歡迎參與討論,地址:https://github.com/daily-interview/fe-interview。
更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技術文章、視頻教程和開源項目,請關注微信公衆號——全棧弄潮兒。