react之高阶组件（二）

高阶组件的使用

接上文————

一、像函数一样直接调用

import React, { Component } from 'react'
import A from './A'

class C extends Component {
    render() {
        return (
            <div>
                <div className="title">组件C</div>
            </div>
        )
    }
}

export default A(C)

二、使用修饰器

前期需要下载依赖

首先运行 npm run eject

将webpack的配置项暴露出来

安装相关插件

npm install babel-preset-stage-2 --save-dev

npm install babel-preset-react-native-stage-0 --save-dev

之后在package.json中配置babel

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ]
    ]
  },

之后在组件中直接使用

import React, { Component } from 'react'
import A from './A'

@A
class B extends Component {
    render() {
        return (
            <div>
                <div className="title">组件B</div>
            </div>
        )
    }
}

export default B