高阶组件装饰器

傷城~ 2023-08-17 17:39 130阅读 0赞

**高阶组件装饰器**

**![1348316-20190901164243830-573435141.png][]**

**注意利用函数式组件进行化简！**

import React from 'react';
    
    //1 组件原型
    class Reg extends React.Component{
        render(){
            return <_Reg service={service} />;
        }
    }
    
    //2 匿名组件
    const Reg = class extends React.Component{
        render(){
            return <_Reg service={service} />;
        }
    }
    
    //3 提参数
    function inject(Comp){
        return class extends React.Component{
            render(){
                return <Comp service={service} />;
            }
        }
    }
    
    //继续提参数
    function inject(service,Comp){
        return class extends React.Component{
            render(){
                return <Comp service={service} />;
            }
        }
    }
    
    //4 props
    function inject(obj,Comp){
        return class extends React.Component{
            render(){
                return <Comp {...obj} />;
            }
        }
    }
    
    //5 柯里化
    function inject(obj){
        function wrapper(Comp){
            return class extends React.Component{
                render(){
                    return <Comp {...obj} />;
                }
            }
        }
        return wrapper;
    }
    
    //变形 + 箭头函数化简 v1
    const inject = obj => Comp => {
        class extends React.Component{
            render(){
                return <Comp {...obj} />;
            }
        }
    }
    
    //变形 + 箭头函数化简 + 函数式组件化简 v2
    const inject = obj => Comp => {
        return () => <Comp {...obj} />;
    }
    
    //finally
    const inject = ovj => Comp => props =>  <Comp {...obj}/>;
    const inject = ovj => Comp => props =>  <Comp {...obj} {...props}/>;

![1348316-20190901235123459-496915059.png][]

import React from 'react';
    const inject = obj => Comp => props => <Comp {...obj}{...props}/>;
    export {inject};

![1348316-20190901235130641-2068454450.png][]

//src/component/login.js修改如下：
    import React from 'react';
    import '../css/login.css';
    import UserService from '../service/user';
    import {Link,Redirect} from 'react-router-dom'
    import {observer} from 'mobx-react';
    import {message} from 'antd';
    import 'antd/lib/message/style';
    //新增
    import {inject} from '../utils';
    
    
    const service = new UserService();
    
    //注意装饰器顺序
    @inject({service})  //生成{service:service}对象
    @observer
    export default class Login extends React.Component{
        handleClick(event){
            event.preventDefault();
            let fm = event.target.form;
            this.props.service.login(
                fm[0].value,fm[1].value
            );
        }
        render(){
            console.log('in login.js')
            if (this.props.service.loggedin){
                return <Redirect to='/about' />; 
            }
            if (this.props.service.errMsg){
                message.info(this.props.service.errMsg,3,
                    ()=> SetTimeout(()=>this.props.service.errMsg=''),1000);
            }
            
            return (
                <div className="login-page">
                    <div className="form">
                        <form className="login-form">
                        <input type="text" placeholder="邮箱"/>
                        <input type="password" placeholder="密码"/>
                        <button onClick={
        this.handleClick.bind(this)}>登录</button>
                        <p className="message">还未注册？ <a href="/reg">注册用户</a></p>
                        </form>
                    </div>
                </div>
            ); 
        }
    }

//src/component/reg.js修改如下：
    import React from 'react';
    import {Redirect,Link} from 'react-router-dom';
    import '../css/login.css'
    import UserService from '../service/user';
    import {observer} from 'mobx-react';
    import {message} from 'antd';
    import 'antd/lib/message/style';
    //新增
    import {inject} from '../utils';
    
    const service = new UserService();
    
    @inject({service})  //生成{service:service}对象并注入组件<Reg />
    @observer
    export default class Reg extends React.Component{
        handleClick(event){
            event.preventDefault();
            let fm = event.target.form;
            this.props.service.reg(fm[0].value,fm[1].value,fm[2].value);
        }
    
        render(){
            console.log('component reg!!')
            if(this.props.service.loggedin){
                return <Redirect to='/'/>;
            }
            if(this.props.service.errMsg){
                message.info(this.props.service.errMsg,3,()=>{
                    setTimeout(()=>this.props.service.errMsg='',1000);
                })
            }
            return (
                <div className="login-page">
                    <div className="form">
                        <form className="register-form">
                        <input type="text" placeholder="姓名"/>
                        <input type="text" placeholder="邮箱"/>
                        <input type="password" placeholder="密码"/>
                        <input type="password" placeholder="确认密码"/>
                        <button onClick={
        this.handleClick.bind(this)}>注册</button>
                        <p className="message">如果已经注册 <Link to="/login">请登录</Link></p>
                        </form>
                    </div>
                </div>
            ); 
        }
    }

![1348316-20190901235943608-1296963134.png][]

转载于:https://www.cnblogs.com/xiaoshayu520ly/p/11442822.html

[1348316-20190901164243830-573435141.png]: /images/20230808/1fa8cfcae89d4677a9117dc3df8011ae.png
[1348316-20190901235123459-496915059.png]: /images/20230808/e6bd7c524c494420b489f18fb01b6b85.png
[1348316-20190901235130641-2068454450.png]: /images/20230808/bbd5c7ab39ae4df292be5fa514571648.png
[1348316-20190901235943608-1296963134.png]: /images/20230808/e66fb3d6b8834d519a99392c8a3ae5c7.png