對react的裝飾器+HOC(高階元件)應用

 ​​高階元件​​

          簡單來說，高階元件是一個函數，能夠接受一個元件并傳回一個新的元件。

          元件是将 props 轉化成 UI ，然而 高階元件将一個組價轉化成另外一個元件。

​​裝飾器​​

        ES7中的一種文法糖，與Python中的裝飾器使用及作用類似，其實就是以一種更為簡潔的方式來來包裝修改類的行為。裝飾對象包括：​

​類​

​​、​

​類的屬性​

​​、​

​類的方法​

​。

項目中使用

由于屬于新特性，如果在項目中使用需要使用​

​babel​

​來進行轉碼。

• 安裝babel插件:

  Babel >= 7.x

• Babel >= 7.x

    npm install --save-dev @babel/plugin-proposal-decorators

    [email protected]

    npm install --save-dev babel-plugin-transform-decorators-legacy

Babel >= 7.x
{ "plugins": [ ["@babel/plugin-proposal-decorators", { "legacy": true }], ] }
[email protected]
{ "plugins": [ "transform-decorators-legacy" ] }
import React, {Component} from 'react';
const addDiv = (title) => (WrappedComponent) => class extends Component {
    render() {
        return (
            <div>
                <h1>{title}</h1>
                <hr/>
                <WrappedComponent/>>
            </div>
        )
    }
};export default addDiv
 
 
//demo.js
import React, {Component} from 'react';
import addDiv from './addDiv.js';@addDiv('标題')
export default class Demo extends Component {
    ...
    render() {
        return(
            <i>demo</i>
        )
    }
}