資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究React.js 中的片段
大多數情況下，我們需要從一個元件返回多個元素。React Fragment 有助於返回多個元素。另一種方法是用一個 html 元素（如 div）將它們包裝起來。但使用額外的 html 節點會導致一些語義問題。
React.Fragment 示例
render() {
return (
<React.Fragment>
<ElementA />
<ElementB />
<ElementC />
</React.Fragment>
);
}
The short syntax is <>:
render() {
return (
<>
<ElementA />
<ElementB />
<ElementC />
</>
);
}假如不使用 React Fragment，會產生什麼問題——
假設我們建立一個表格——
class ExampleTable extends React.Component {
render() {
return (
<table>
<tr>
<ExampleColumns />
<tr>
</table>
);
}
}
class ExampleColumns extends React.Component {
render() {
return (
<div>
<td>col 1</td>
<td>col 2</td>
</div>
);
}
}實際語法將包含我們新增到 columns 的 return 語句中的 div 。
<table> <tr> <div> <td>col 1 </td> <td>col 2</td> </div> </tr> </table>
現在，table 標籤包含一個正在破壞 html 語義的 div 標籤。因此，為了避免這種情況，我們可以簡單地用 React.Fragment 或簡寫 <> 替換 div。
class ExampleColumns extends React.Component {
render() {
return (
<>
<td>col 1</td>
<td>col 2</td>
</>
);
}
}我們還可以在迭代列表時使用片段。
props.myMessages.map(message => (
// Without the `key`, React will fire a key warning
<React.Fragment key={message.id}>
<dt>{message.title}</dt>
<dd>{message.text}</dd>
</React.Fragment>
))
更新於： 05-Sep-2019
411 次瀏覽
廣告