[React-09] HOC(高阶组件)

Higher-Order Components就是一个函数，传给它一个组件，它返回一个新的组件。

const NewComponent = higherOrderComponent(YourComponent)

比如，我们想要我们的组件通过自动注入一个版权信息。

// withCopyright.js 定义一个高阶组件
import React, { Component, Fragment } from 'react'

const withCopyright = (WrappedComponent) => {
  return class NewComponent extends Component {
    render() {
      return (
        
          
          
© Leo Zhou 
        
      )
    }
  }
}
export default withCopyright

// 使用方式
import withCopyright from './withCopyright'

class App extends Component {
  render () {
    return (
        

        
Awesome React
        
React.js是一个构建用户界面的库
      
    )
  }
}
const CopyrightApp = withCopyright(App)

这样只要我们有需要用到版权信息的组件，都可以直接使用withCopyright这个高阶组件包裹即可。

在这里要学习在CRA 中配置装饰器模式的支持。