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

Question

我正在使用 React Intl 进行内部化，并且必须编写才能在 render() 方法中this.props.intl.formatMessage({id: 'some.message.id'}, values) 获取翻译后的字符串。现在，装饰器应该如何为此提供快捷功能，以便我可以做类似_t('some.message.id', values)或类似的事情？

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

Answer 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参数等。