一個簡單的列子
UserInfoHoc.js
<code>import React,{ Component } from 'react'; const UserInfoHoc = ( WrappedComponent ) =>{// WrappedComponent指被包裝的 React.Component class UserInfo extends Component{ //類名可以省略，省略的話標籤名就是以temp或者其他的代替，必須要有返回值 constructor(props) { super(props); this.state = { username: '張三', } } render () { return ( // 將參數當做一個組件返回出去 ) } } return UserInfo; } export default UserInfoHoc; 複製代碼/<code>
PageA.js
<code> import React,{ Component } from 'react'; import UserInfoHoc from './UserInfoHoc'; class PageA extends Component{ render () { return (
A頁面
{ this.props.username } // 使用了高階組件後，這裡就可以直接使用了{ this.props.username } // 使用了高階組件後，這裡就可以直接使用了
/<code>高階組件就是把username通過props傳遞給目標組件,目標組件只需要從props裡面拿來用就可以
我們可以使用高階組件來
代碼重用，頁面邏輯更簡單，更易於維護對state和props進行操作