-
什么是高阶组件?
高阶组件就是一个函数, 这个函数接收一个参数, 这个参数是一个组件 -
格式
const Hoc = ( Comp ) => { return class 类名称 extends React.Component { render () { return <Comp></Comp> } } } //这里的Hoc就是一个高阶组件
-
为什么要用高阶组件? ( 高阶组件的好处 / 功能)
组件复用接下来以一个案例的形式,来说明一个高阶组件
import React, { Component } 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 ( <div> <h3> A组件 </h3> { this.props.banner() } </div> ) } } class B extends Component { render () { return ( <div> <h3> b组件 </h3> { this.props.banner() } </div> ) } } const HocA = Hoc( A ) const HocB = Hoc( B ) class C extends Component { render () { return ( <div> <h3> C组件 </h3> <HocA></HocA> <hr/> <HocB></HocB> </div> ) } } export default C
HOC ( Higher Order Component) 高阶组件
最新推荐文章于 2024-05-13 21:46:06 发布