它必须是一个函数，通常来自React.PropTypes

Question

我想将字符串从 Main 传递到 Header。它成功但警告。我是 React 的初学者，所以我不明白

it must be a function

是什么意思。

有人知道如何解决这个警告吗？

警告是：

我的代码如下：

Main.js

import React from 'react';

import Header from './Header';
import AppList from './AppList/AppList';
import Footer from './Footer';

const propTypes = {
  mainInfo: React.PropTypes.shape({
    title: React.PropTypes.string.isRequired,
    apps: React.PropTypes.array.isRequired,
  }),
};

class Main extends React.Component {
  static methodsAreOk() {
    return true;
  }

  render() {
    return (
      <div>
        <Header title={this.props.mainInfo.title} />
        <AppList apps={this.props.mainInfo.apps} />
        <Footer />
      </div>
    );
  }
}

Main.propTypes = propTypes;

export default Main;

Header.js

import React from 'react';

const propTypes = {
  title: React.PropTypes.string.isRequred,
};

class Header extends React.Component {
  static methodsAreOk() {
    return true;
  }

  render() {
    return (
      <div className="header">
        <h1>{this.props.title}</h1>
      </div>
    );
  }
}

Header.propTypes = propTypes;

export default Header;

Answer 1

您有一个错误：

React.PropTypes.string.isRequred

。正确拼写

isRequired

，应该没问题。

Answer 2

当您的 PropType 实际上是

undefined

时，就会发生这种情况。

在我的例子中，我指定了

PropTypes.integer

的 propType，它不是 proptypes 列表之一。这实际上变成了

undefined

。相反，我应该使用

PropTypes.number

。

请注意

PropTypes.bool

与

PropTypes.boolean

以及

PropTypes.func

与

PropTypes.function

之间的类似错误。

Answer 3

此外，它是布尔值的

bool

。我浏览了文档并遇到了完全相同的问题，直到我回去仔细阅读它们。

https://facebook.github.io/react/docs/typechecking-with-proptypes.html

Answer 4

例如

React.PropTypes.sting
React.PropTypes.text

React 还可以告诉用户：“您定义的 PropType 'sting' 未定义。您是否拼写错误？可用的 PropType 包括：字符串、数字、布尔值等。”

Answer 5

就我而言，当我声明

Component.propTypes

及其下方时，我没有写

Component.defaultProps

，而是再次写了

Component.propTypes

分配默认值。

Answer 6

只需复制和粘贴，除非您能确保不会输入错误！

我也遇到这个问题了，浪费了我很多时间去解决！

所以，请记下来！

VS 代码和插件

万一写错了！

```jsx

TestModal.propTypes = {
    title: PropTypes.string,
    //badHideModal: PropTypes.func.required,
    hideModal: PropTypes.func.isRequired,
};

```

Answer 7

三步解决问题的简单方法：

• 第 1 步： 安装 NPM prop-types 包 (

  npm prop-types install

  );
• 第2步： 将包导入到您的文件中。

代码：

import PropTypes from 'prop-types';

• 第 3 步： 从语句中删除

  React

  关键字（例如：

  React.PropTypes.string.isRequired to PropTypes.string.isRequired

  取决于您的语句，因此只需删除

  React

  关键字，因为您现在是从 prop-types 导入，而不是从反应库。

Answer 8

类似

isRequred

而不是

isRequired

的事情发生在我身上。我正在尝试定义默认道具，但复制粘贴了propTypes并且从未更改名称，所以我最终得到了这样的结果：

import PropTypes from 'prop-types'

const Main = ({ title }) => // whatever

Main.propTypes = {
  title: PropTypes.string
}

Main.propTypes = { // this should have been Main.defaultProps! 🤦‍♂️
  title: 'This is the default title!'
}

所以 PropTypes 抱怨

title

的 prop 类型不正确。它说的是“它必须是一个函数，通常来自 React.PropTypes，但它是一个字符串”。

我以为我要疯了。我正在查看第一个

Main.propTypes

，并试图找到拼写错误或任何可能错误的地方，但正如你所看到的，它完全没问题。我打开了多个定义了 prop 类型的文件，但没有抛出错误。

我显然找错了地方，但最终还是运气不好找到了它。我很幸运能够真正找到它。这些捂脸的虫子很难弄清楚，因为它们就像魔术师移动一只手来吸引所有的目光，同时用另一只手准备魔术，通常是在众目睽睽之下。

Answer 9

由于拼写问题，我们收到警告

错误：

Component.propTypes = {
    allowChannel: PropTypes.boolean,
    showDisabled: PropTypes.boolean,
}

解决方案：

Component.propTypes = {
    allowChannel: PropTypes.bool,
    showDisabled: PropTypes.bool,
}