Higher-Order Components就是一個函式，傳給它一個元件，它返回一個新的元件。

import React from 'react'

// 返回一個元件的函式，稱之為高階元件
const titleHoc = (title) => {
  return Comp => {
    return class extends React.Component {
      render() {
        return (
          <Comp
            title={title}
          ></Comp>
        )
      }
    }
  }
}

export default titleHoc
 

//使用方式
import React, { Component } from 'react'

import titleHoc from './titleHoc'

class Hoc extends Component {
  componentDidMount() {
    console.log(this.props.title)
  }

  render() {
    return (
      <div>
        hello
      </div>
    );
  }
}

export default titleHoc(Hoc)

這樣只要我們有需要用到版權資訊的元件，都可以直接使用withCopyright這個高階元件包裹即可。

還可以使用裝飾器來使用

import React, { Component } from 'react'

import titleHoc from './titleHoc'

@titleHoc('world')
class Hoc extends Component {
  componentDidMount() {
    console.log(this.props.title)
  }

  render() {
    return (
      <div>
        hello
      </div>
    );
  }
}

export default Hoc
 

注意要配置babelloader來解析

//babel.config.js
module.exports = {
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
  ]
}