react高阶组件

1.首先介绍高阶函数

基本概念：

函数可以作为参数被传递：

函数可以作为返回值输出：

 

2.高阶组件

组件作为参数被传递，返回值是一个组件

高阶组件是一个函数

案例：将A组件作为公共组件，BC组件作为A函数的参数，来共享显示A组件

此处红框是A组件，红框里左边内容为B组件，右边内容为C组件

 

1.创建公共的A组件

将组件A封装成一个函数，接收一个参数，这个参数就是其他组件，

return的内容就是A组件的视图内容，

将其他组件要展示的位置，写成参数的标签，放置在那里，

最后导出A组件

import React,{Component} from 'react'

function A(WrappedComponent) {
    return class A extends Component{
        render(){
            return(
                <div className="a-container" >
                    <div className="header">
                        <div>提示</div>
                        <div>x</div>
                    </div>
                    <div>
                        <WrappedComponent></WrappedComponent>
                    </div>
                </div>
            )
        }
    }
}
export default A复制代码

2.创建B组件

引入A组件，

写B组件的内容，

将B组件作为A组件的参数导出

import React,{Component} from 'react'
import A from './A'


 class B extends Component{
    render(){
        return(
            <div className="con-B">
                <img src={require('../images/bbb.png')} alt=""/>
            </div>
        )
    }
}

export default A(B)复制代码

3.同理创建C组件

import React,{Component} from 'react'
import A from './A'

 class C extends Component{
    render(){
        return(
            <div>
                <img src={require('../images/aaa.jpg')} alt=""/>
            </div>
        )
    }
}

export default A(C)复制代码

4.将组件放置在App.js中展示

App.css中写入样式

import React, { Component } from 'react';

import './App.css';
import A from './components/A'
import B from './components/B'
import C from './components/C'
class App extends Component {
  render() {
    return (
      <div className="App">
         <A/>
          <B/>
          <C/>
      </div>
    );
  }
}

export default App;复制代码

5.完成即可见，BC展示的区域，是参数标签的部分