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展示的区域,是参数标签的部分
标签:return,App,Component,react,组件,import,高阶 From: https://blog.51cto.com/u_12422954/5986017