資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學React.js 和高階元件 (HOC) 中返回相鄰元素
通常，React 的 render 方法中的 return 語句返回一個包含所有子 JSX 的單個 div 元素，如下所示：
render(){
return (
<div>
<h2>Header</h2>
<p>Test</p>
</div>
);
}我們不能簡單地返回多個元素，我們需要一個類似於上面 div 的父容器。
如果沒有父容器元素，我們甚至可以返回一個數組，如下所示：
返回陣列時，我們需要為陣列的每個元素提供一個唯一的 key。
render(){
return (
[
<p key=”1”>Paragraph 1</p>,
<p key=”2”>Paragraph 2</p>
]
);
}但是使用陣列，我們無法提供可以在包裝 div 元素上使用的 CSS 類。
解決上述問題的方案是使用高階元件 (HOC)。使用 HOC，我們可以為元件新增附加功能，例如向其新增一些 CSS 類。
使用高階元件
建立一個簡單的函式式元件
import React from ‘react’; const wrapperComponent = (props)=> props.children export default wrapperComponent;
在上面的程式碼示例中，使用上述 wrapperComponent 代替 div 元素
import wrapperComponent from ‘wrapperComponent’;
render(){
return (
< wrapperComponent >
<h2>Header</h2>
<p>Test</p>
</ wrapperComponent >
);
}現在可以透過此 wrapperComponent 新增 CSS 類。讓我們看看如何操作。
我們可以在 wrapperComponent 中新增 CSS 類，如下所示：
import React from ‘react’;
const wrapperComponent = (props)=> {
return (
<div classes={props.classes}>
{props.children}
</div>
)
}
export default wrapperComponent;此元件現在是一個可重用的元件。我們可以將類作為 props 傳遞給 wrapperComponent。
render(){
return (
< wrapperComponent classes={classes.App}>
<h2>Header</h2>
<p>Test</p>
</ wrapperComponent >
);
}編寫 HOC 的另一種替代方法
const wrapperComponent =(ChildComponent, classes)=>{
return (props)={
<div className={classes}>
<ChildComponent {…props}/>
</div>
}
}
export default wrapperComponent;使用 ES6 展開運算子將 props 傳遞給子元件。
這裡我們返回一個函式式元件，但我們也可以返回一個有狀態的類元件。
const wrapperComponent =(ChildComponent, classes)=>{
render(){
return class extends Component{
<div className={classes}>
<ChildComponent {…this.props}/>
</div>
}
}
}在基於類的元件的情況下，通常使用 {...this.props} 將 props 傳遞給子元件。將 props 傳遞給子元件對於維護它們與該元件上的傳入 props 之間的連結是必要的。
請注意，我們返回的是一個匿名類，因此關鍵字 class 後面沒有任何名稱。
雖然不應該在這裡操作我們包裝在 div 內的 ChildComponent。
現在，我們可以包裝我們的 ChildComponent 並傳遞 CSS 類，如下所示：
render(){
return (
< div>
<h2>Header</h2>
<p>Test</p>
</ div >
);
}
export default wrapperComponent(App, classes.App);許多第三方庫使用 HOC 功能（如 Redux）來為 React 元件提供附加功能。
使用 React.Fragment
現在，為了返回多個元素，我們使用了 div、陣列或自定義 React HOC 元件。React 團隊在最新版本中將其作為內建功能推出。
因此，我們可以像這樣使用它：
return( <React.Fragment> //multiple or single jsx code </React.Fragment> )
React.Fragment 的簡寫形式是 <>
return( < > //multiple or single jsx code </ > )
但在使用此功能之前，請確保您的應用程式中 React 具有最新版本。
250 次瀏覽
