zoukankan      html  css  js  c++  java
  • 在react中用装饰器来装饰connect

    假设我们在react中有如下header组件:

    
    import React, { PureComponent } from 'react';
    import { connect } from 'react-redux';
    import actions from './actions';
    class Header extends PureComponent{
      render(){
        return (
          <div>这是个组件</div>
        )
      }
    }
    
    const mapStateToProps = state => ({
      todos:state.todos
    })
    
    const mapDispatchToProps = dispatch => ({
      setTodos:value=>dispatch(actions.setTodos(value))
    })
    
    export default connect(mapStateToProps,mapDispatchToProps)(Header)
    

    我们在写react组件时结合redux要定义mapStateToProps和mapDispatchToProps两个返回对象的纯函数以便交给connect去包裹使用 具体connect使用查看connect

    这里我们就可以用装饰器(Decorator)来改写下:

    
    import React, { PureComponent } from 'react';
    import { connect } from 'react-redux';
    import actions from './actions';
    
    @connect(
      state=>({
        todos:state.todos
      }),
      dispatch=>({
        setTodos:value=>dispatch(actions.setTodos(value))
      })
    )
    class Header extends PureComponent{
      render(){
        return (
          <div>这是个组件</div>
        )
      }
    }
    
    export default Header
    

    如此,改造完成,代码看上去也比改造前的干净整洁了

    但是由于装饰器的兼容性问题我们需要使用babel来转换

    ```// 安装babel插件 yarn add @babel/plugin-proposal-decorators ```

    修改package.json下的babel

    
    "babel": {
      "presets": [
        "react-app"
      ],
      "plugins": [
        [
          "@babel/plugin-proposal-decorators",
          {
            "legacy": true
          }
        ]
      ]
    },
    

    最后一步
    根目录下新建jsconfig.json解决编辑器报错问题

    
    {
      "compilerOptions": {
        "experimentalDecorators": true
      }
    }
    

    然后就可以愉快的coding了

    来源:https://segmentfault.com/a/1190000017338904

  • 相关阅读:
    第五周项目4-静态成员应用
    第五周项目3-用多文件组织多个类的程序
    python的wraps函数
    python函数加括号于不加括号的区别
    socket.error: [Errno 10048]
    tensorflow的MNIST教程
    cidr地址段
    mongodb数据库的存储问题
    搭建巡风扫描器
    mongodb的数据库,集合,数据可介绍。
  • 原文地址:https://www.cnblogs.com/datiangou/p/10158912.html
Copyright © 2011-2022 走看看