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