Question

I'm using the package 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);

在上面的代码段中，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
}

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

Lint complains about missing prop coming from HOC

1 个答案: