如何在 React Redux 应用程序中使用装饰器?

IT技术 javascript reactjs ecmascript-6 decorator redux
2021-05-15 16:07:58

我正在使用 React Redux 创建简单的应用程序。我想使用装饰器在我的组件中注入一些方法..我在其他项目中看到了类似的代码:

import React, { Component } from 'react';
import { connect } from 'react-redux';


@creatable
export default class BookDetails extends Component {

  render() {
    console.log(this.props);
    if (!this.props.Activebook) {
      return <div> please select book</div>
    }
    return (
        <div>{this.props.Activebook.title}</div>
    );
  }
}


function creatable() {
  return Create => {
    @connect(state=>({Activebook : state.ActiveBook}))
   class MyDecorator extends Component {
     render() {
       console.log('>>>>>>>>>>>>>');
    console.log(this.props);
       console.log('>>>>>>>>>>>>>');
       return (
         <div>
           <Create
              {...this.props}
           />
         </div>
       )
     }

   }
    return MyDecorator;
  }
}

不幸的是,上面的代码不起作用。为什么?

2个回答

请注意,我们不建议使用装饰器来连接组件。您不会在官方文档或示例中的任何地方找到它们。

仅仅因为一些社区示例使用它们并不意味着这是一个好主意:规范仍在变化,工具支持是不稳定的,坦率地说,你不需要装饰器,connect()因为它们对简单的函数调用进行了脱糖。

例如,而不是

@connect(mapStateToProps)
class MyComponent extends Component {}

你应该写

class MyComponent extends Component {}
MyComponent = connect(mapStateToProps)(MyComponent)

这样,在提案成为语言的一部分之前,您不必担心它们会中断。

我建议您坚持我们在官方 Redux 示例中使用的约定,并在采用实验性语法扩展时非常谨慎。

Babel 6 不支持带es2015预设的装饰器,也不支持带预设的装饰器stage-0您必须添加babel-plugin-transform-decorators-legacy插件以启用装饰器:

$ npm install --save-dev babel-plugin-transform-decorators-legacy

并添加到您的插件中.babelrc

{
  "plugins": [
    "transform-decorators-legacy",
    ...
  ]
}

这是我所知道的获得装饰器支持的最简单方法。默认情况下,它们不包含在 babel 中,因为它们实际上尚未标准化。