Higher-Order Components就是一个函数,传给它一个组件,它返回一个新的组件。
作用:让功能像组件一样可以复用
案例:我有一个轮播图,需要在A组件用,也需要在B组件用
import React,{ Component,Fragment } from 'react'
//定义一个带着需要复用的方法的组件
const Hoc = ( Comp ) => {
return class Banner extends Component{
banner () {
//这是一个方法这个方法是轮播图
return 'banner'
}
render () {
return <Comp banner = { this.banner }></Comp>
}
}
}
//定义需要使用轮播图功能的两个组件
class A extends Component {
render () {
return (
<Fragment>
<h3>A组件</h3>
{ this.props.banner() }
</Fragment>
)
}
}
class B extends Component {
render () {
return (
<Fragment>
<h3>B组件</h3>
{ this.props.banner() }
</Fragment>
)
}
}
//用定义的Hoc包裹A组件和B组件
const HocA = Hoc( A )
const HocB = Hoc( B )
class C extends Component {
render () {
return (
<Fragment>
<h3>C组件</h3>
<HocA></HocA>
<hr></hr>
<HocB></HocB>
</Fragment>
)
}
}
export default C