Question

我正在使用React Intl进行内部化，并且必须在render（）方法中编写this.props.intl.formatMessage({id: 'some.message.id'}, values) to get a translated string。现在，装饰者应该如何为此提供快捷功能，以便我可以像_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参数等。

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

1 个答案: