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

Question

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

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)

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

我建议您遵守我们在 official Redux examples 中使用的约定并且在采用实验性语法扩展时要非常谨慎。