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

Question

我想将字符串从 Main 传递到 Header。它成功但警告。我是 React 的初学者，所以我不知道 it must be a function 是什么意思。

任何人都知道如何解决这个警告？

警告是：

我的代码如下：

主.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;

页眉.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;

原文由 morizotter 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您有一个错误： React.PropTypes.string.isRequred 。拼写 isRequired 正确，应该没问题。

原文由 dannyjolie 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

当您的 PropType 实际上是 undefined 时，就会发生这种情况。

在我的例子中，我指定了 PropTypes.integer 的 propType，这不是 proptypes 列表之一。从字面上看变成 undefined 。相反，我应该使用 PropTypes.number 。

Watch out for similar mistakes with PropTypes.bool vs PropTypes.boolean , as well as PropTypes.func vs PropTypes.function .

原文由 Tyler Collier 发布，翻译遵循 CC BY-SA 4.0 许可协议