如何为带有装饰器的React.js组件编写一个通用的快捷方法

How to generically write a shortcut method for React.js components with decorators?

本文关键字：一个 方法 组件 js React      更新时间：2023-09-26

我使用React Intl进行内化，并且必须编写this.props.intl.formatMessage({id: 'some.message.id'}, values)以在render()方法中获得翻译的字符串。现在，一个装饰器应该如何提供一个快捷功能，这样我就可以像_t('some.message.id', values)或类似的?

我知道我可以写另一个类来扩展React。组件或将组件包装在另一个类或其他任何东西中，但如果可能的话，我想用装饰器来做(为了学习和理解目的)。

这里有一些东西可以让你开始:

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变量来缩短代码)。

你当然可以push一个中间函数作为参数，这样可以更好地处理id参数，等等

相关文章：