react之Fragments使用方法及使用場景
阿新 • • 發佈:2020-12-06
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 或屬性。
資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com
帶 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的屬性。未來我們可能會新增對其他屬性的支援,例如事件。