高阶组件
定义:是一个函数,它接收一个组件并返回另一个组件
基本使用
import React, { Component } from 'react'
//基础组件
function Child(props){
return <div className="border">Child</div>;
}
//传入一个组件 返回一个组件
const foo = (Cmp) => {
//可能带参数 返回props
return (props) => {
return <Cmp {...props}/>;
}
}
export default class HocPage extends Component {
render() {
const Foo = foo(Child);
return (
<div>
<Foo/>
</div>
)
}
}
装饰器
import React, { Component } from 'react'
// function Child(props){
// // console.log(props);
// return <div className="border">Child</div>;
// }
//返回组件
// const foo = (Cmp) => {
// //可能带参数 返回props
// return (props) => {
// return <Cmp {...props}/>;
// }
// }
const foo = Cmp => props => {
return (
<div className="border">
<Cmp {...props}/>
</div>
)
}
//装饰器 不支持function 可以多层嵌套
@foo
@foo
class ChildSceond extends Component{
render(){
return <div className="border">Child</div>
}
}
export default class HocPage extends Component {
render() {
// console.log(this.props);
// const Foo = foo(Child);
return (
<div>
{/* <Foo/> */}
<ChildSceond/>
</div>
)
}
}
先安装
git add .
git commit -m 'up'
yarn eject
配置package.json
"babel": { "presets": [
"react-app"
], "plugins": [
[
"@babel/plugin-proposal-decorators", {
"legacy": true }
] ]
}
安装装饰器器插件
npm install @babel/plugin-proposal-decorators --save-dev
或
yarn add @babel/plugin-proposal-decorators --dev
然后启动 如果报错 删除node_modules 再yarn install一下再启动
npm start
有警告的话在根目录创建jsconfig.json
{
"compilerOptions": {
"experimentalDecorators": true
}
}
组件复合 具名插槽与不具名插槽
components/Layout.js
import React, { Component } from 'react'
import TopBar from './TopBar';
export default class Layout extends Component {
componentDidMount(){
const {title} = this.props;
document.title = title;
}
render() {
const {children,showTopBar} = this.props;
const a = [];
if(children.$$typeof){
//不具名 直接是节点
a.push(children);
}else{
//具名是个对象
for (let item in children) {
//对象里面的value是节点
a.push(children[item]);
}
}
return (
<div>
{
showTopBar && <TopBar/>
}
{/* {children.btn}
{children.txt} */}
{
//可以适应具名插槽或不具名插槽 但是不能一起混着来
a.map((item,index) => {
return <React.Fragment key={index}>{item}</React.Fragment>
})
}
</div>
)
}
}
components/TopBar.js
import React, { Component } from 'react'
import { handleComsumer } from '../AppContext'
//高阶函数
// const handleComsumer = Cmp => props => {
// return <Consumer>{ctx => <Cmp {...ctx} {...props}/>}</Consumer>;
// }
export default class TopBar extends Component {
render() {
const Top = handleComsumer(TopBarHandle);
return (
<Top/>
// <Consumer>
// {
// ctx => <TopBarHandle {...ctx}/>
// }
// </Consumer>
)
}
}
function TopBarHandle(props){
return (<div className="topBar">
{props.user.name}
</div>)
}
pages/UserPage.js
import React, { Component } from 'react'
import TopBar from '../components/TopBar'
import Layout from '../components/Layout'
export default class UserPage extends Component {
render() {
return (
<Layout showTopBar={true} title="用户中心">
{/* <div>
<h1>UserPage</h1>
</div> */}
{
{
btn: <button>按钮</button>,
txt: '文案'
}
}
</Layout>
)
}
}
网友评论