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

Question

我正在使用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;
  }
}

不幸的是,上面的代码不起作用.为什么？

Answer 1

请注意,我们不建议使用装饰器连接组件.您无法在官方文档或示例中的任何位置找到它们.

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

例如,而不是

@connect(mapStateToProps)
class MyComponent extends Component {}

你应该写

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

这样,在提案成为语言的一部分之前,您不必担心它们会被破坏.

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

Answer 2

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 中，因为它们实际上尚未标准化。