Почему PropTypes в React отмечен как deprecated?

317
02 октября 2017, 03:15

Есть компонент, он должен получать массив значений через props. И все работало до тех пор пока я не добавил валидацию через PropTypes. Теперь код валится с ошибкой:

Header.js:5 Uncaught TypeError: Cannot read property 'array' of undefined
    at Object../src/Header.js (Header.js:5)
    at __webpack_require__ (bootstrap 67ddc3fcbc623b5d0dec:669)
    at fn (bootstrap 67ddc3fcbc623b5d0dec:87)
    at Object../src/App.js (fetch.js:461)
    at __webpack_require__ (bootstrap 67ddc3fcbc623b5d0dec:669)
    at fn (bootstrap 67ddc3fcbc623b5d0dec:87)
    at Object../src/index.js (index.css?f255:26)
    at __webpack_require__ (bootstrap 67ddc3fcbc623b5d0dec:669)
    at fn (bootstrap 67ddc3fcbc623b5d0dec:87)
    at Object.0 (registerServiceWorker.js:108)
    at __webpack_require__ (bootstrap 67ddc3fcbc623b5d0dec:669)
    at bootstrap 67ddc3fcbc623b5d0dec:715
    at bundle.js:719
./src/Header.js @ Header.js:5
__webpack_require__ @ bootstrap 67ddc3fcbc623b5d0dec:669
fn @ bootstrap 67ddc3fcbc623b5d0dec:87
./src/App.js @ fetch.js:461
__webpack_require__ @ bootstrap 67ddc3fcbc623b5d0dec:669
fn @ bootstrap 67ddc3fcbc623b5d0dec:87
./src/index.js @ index.css?f255:26
__webpack_require__ @ bootstrap 67ddc3fcbc623b5d0dec:669
fn @ bootstrap 67ddc3fcbc623b5d0dec:87
0 @ registerServiceWorker.js:108
__webpack_require__ @ bootstrap 67ddc3fcbc623b5d0dec:669
(anonymous) @ bootstrap 67ddc3fcbc623b5d0dec:715
(anonymous) @ bundle.js:719
webpackHotDevClient.js:126 ./src/Header.js
  Line 1:  React.PropTypes is deprecated since React 15.5.0, use the npm module prop-types instead  react/no-deprecated

Вот сам компонент:

import React, { Component, PropTypes } from 'react';
class Header extends Component {
  static propTypes = {
    items: PropTypes.array.isRequired
  };
  render() {
    return (
      <div>
        {this.props.items.map((item, index) =>
          <a key={index} href={item.link}>
            {item.label}
          </a>
        )};
      </div>
    );
  }
}
export default Header;

Это его родитель :

const menu = [
  {
    link: '/articles',
    label: 'Articles'
  },
  {
    link: '/contacts',
    label: 'Contacts'
  },
  {
    link: '/posts',
    label: 'Posts'
  },
];
class App extends Component {
  render() {
    return (
      <div>
        <Header items={menu} />
      </div>
    );
  }
}
export default App; 

Помогите пожалуйста решить проблему. Подскажите PropTypes действительно deprecated или я где-то ошибся, и если он deprecated то какие альтернативы PropTypes? Спасибо.

READ ALSO
Вложенный цикл вызывает утечку памяти

Вложенный цикл вызывает утечку памяти

Есть массив с вложенным масивом, который проверяет, есть ли у двух массивов общее значение определённого ключаНо почему-то при работе такого...

328
Ajax запрос при отправке?

Ajax запрос при отправке?

Как отправить данные через Ajax методом GET? Можно ли вообще отправлять данные на сервер через Ajax методом GET?

306
new Option(text, value, defaultSelected, selected);

new Option(text, value, defaultSelected, selected);

Если создавать опцию как:

423