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

Posted 2023-02-22

【中文标题】如何在 React Redux 应用程序中使用装饰器？

【英文标题】：How can I use decorators in a React Redux application?

【发布时间】：2016-06-04 05:34:09

【问题描述】：

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

很遗憾，上面的代码不起作用。为什么？

【问题讨论】：

定义“不工作”？

当我测试这段代码时，它在@ creatable 附近显示错误只是我想要上面的工作示例..

@user3126894 如果您遇到错误，应在问题描述中提供。

我已经将代码推送到 repo github.com/shivamitakari1990/react-book 你能看看吗？？

【参考方案1】：

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

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

例如，而不是

@connect(mapStateToProps)
class MyComponent extends Component 

你应该写

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

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

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

【参考方案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 中，因为它们实际上还没有被标准化。

【讨论】：

哦！我的 package.json 中缺少的内容。让我试试看。谢谢