Это должна быть функция, обычно из React.PropTypes

Я хочу передать строку из 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;

Ответ 1

У вас есть ошибка: React.PropTypes.string.isRequred. Заклинание isRequired правильно, и все должно быть хорошо.

Ответ 2

Это происходит, когда ваш PropType на самом деле undefined.

В моем случае я указал propType PropTypes.integer, который не является одним из списка proptypes. Это буквально превращается в undefined. Вместо этого я должен был использовать PropTypes.number.

Ответ 3

Кроме того, он bool для booleans. Я снял документы и имел ту же проблему, пока не вернулся и внимательно прочитал их.

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

Ответ 4

например.

React.PropTypes.sting
React.PropTypes.text

React также может сказать пользователю: "Определяемый вами тип" PropType "- это undefined. Вы его заметили? Доступны следующие типы: строка, число, bool и т.д.

Ответ 5

просто скопируйте и вставьте, если вы не можете убедиться, что вы не наберете какую-нибудь опечатку!

У меня также была эта проблема, и я потратил много времени на ее исправление!

Итак, просто сделайте заметку!

код VS и плагины

в случае опечатки!

`` `JSX

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

`` `

Ответ 6

Простой способ решить проблему в 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.