如何使用装饰器为 React.js 组件编写快捷方法？

【问题标题】：How to generically write a shortcut method for React.js components with decorators?如何使用装饰器为 React.js 组件编写快捷方法？
【发布时间】：2017-01-13 20:17:12
【问题描述】：

我正在使用 React Intl 进行内部化，并且必须在 render() 方法中写入 this.props.intl.formatMessage({id: 'some.message.id'}, values) to get a translated string。现在，装饰器应该如何为此提供快捷功能，以便我可以像 _t('some.message.id', values) 或类似的那样做？

我知道我可能只是编写另一个扩展 React.Component 的类或将组件包装在另一个类中或任何其他类中，但如果可能的话，我想使用装饰器（出于学习和理解目的）所以。

【问题讨论】：

标签： javascript reactjs decorator react-intl

【解决方案1】：

以下是帮助您入门的内容：

function mydecorator(target, key, descriptor) {
  const method = descriptor.value;

  descriptor.value = function(...args) {
    args.push(this.props.intl.formatMessage); // may need `.bind(...)`
    return method.apply(this, args);
  }
}

使用方法：

@mydecorator
render(_t) {
  ...
}

装饰器将render 替换为一个函数，该函数将this.props.intl.formatMessage 的引用推送到参数列表中，随后在调用原始render（AFAIK 不接受参数，所以您可能可以通过取出args 变量来缩短代码）。

您当然可以将中间函数作为参数推送，以更好地处理 id 参数等。

【讨论】：