它必须是一个函数，通常来自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。

Answer 3

此外，它是bool的布尔值。我浏览了文档并遇到了完全相同的问题，直到我回去仔细阅读它们。

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

Answer 4

e.g。

React.PropTypes.sting
React.PropTypes.text

React也可以告诉用户：“你定义的PropType'sting'是未定义的。你拼错了吗？。可用的PropTypes是：string，number，bool等。”

Answer 5

通过3个步骤解决问题的简便方法：

• 第1步：安装NPM道具类型包（npm prop-types install）;
• 第2步： 在您的文件中导入包。

代码： import PropTypes from 'prop-types';

• 第3步：从语句中删除React关键字（例如：React.PropTypes.string.isRequired to PropTypes.string.isRequired取决于您的陈述，因此只需删除React关键字，因为您现在从 prop-types 导入，而不是从React库导入。

Answer 6

只是复制＆amp;粘贴，除非你可以确保你不会输入一些拼写错误！

  

我也遇到过这个问题，我花了很多时间来修复它！

所以，只需记笔记！

VS代码＆amp;插件

  

如果有拼写错误！

```JSX

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

```

Answer 7

发生了类似于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，并试图查找错别字或任何可能出错的内容，但是如您所见，这完全没问题。我打开了多个定义了道具类型但没有引发错误的文件。

我显然在看错地方，但最终发现它很不幸。我很幸运能真正找到它。这些令人难以置信的bug很难弄清，因为它们就像魔术师一样，一只手在吸引另一只眼睛的同时移动另一只眼睛，通常是在清晰的视野中。

Answer 8

就我而言，它是在我声明Component.propTypes并在其下声明时发生的，而不是写Component.defaultProps而不是再次写Component.propTypes来指定默认值。