React学习笔记(四) 高阶组件

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 }]
  ]
}