Lint 抱怨缺少来自 HOC 的道具

Question

我正在使用包 react-translate 来本地化我的应用程序。

import React from 'react';
import { translate } from 'react-translate';


class Hello extends React.Component {
  render() {
    return (
      <div>
        {this.props.t('test_string')}
      </div>
    );
  }
}

export default translate('Hello')(Hello);

在上面的 sn-p 中， translate 是一个高阶组件，它将函数 t 添加到 Hello 的属性中。

一切正常，但 lint 一直在抱怨，因为 t 不在 propTypes 中。

error  't' is missing in props validation         react/prop-types

这正常吗？我想我做错了什么，但我不知道是什么......

编辑：

正如@stevejay 所说，我可以将 t 添加到我的 propTypes 中，但我不喜欢这个解决方案，因为 - 从我对反应的完全无知 - 1) t 不是组件本身的属性，也不是我想要手动传递 2）我必须将属性添加到我已经添加了 HOC 的所有模型中，这似乎是多余的

Answer 1

要使 linter 静音，您只需将 propTypes 添加到您的 Hello 组件中：

import React from 'react';
import PropTypes from 'prop-types';
import { translate } from 'react-translate';

class Hello extends React.Component {
  ...
}

Hello.propTypes = {
  t: PropTypes.func.isRequired
}

您创建的组件使用的任何道具都应该以这种方式声明。