web-dev-qa-db-ja.com

React.createClassを無効にし、Babel ReactのPropTypesの非推奨の警告が存在する

最新のReact 15.5.1パッケージ、Babel Reactを使用してjsxファイルを解決する場合、次の警告が表示されます。

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

warning.js:36 Warning: A Component: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

私のコードは次のとおりです：

import React from 'react'
import ReactDOM from 'react-dom';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 1
    }
  }
  componentDidMount() {
    setInterval( ()=> {
      this.setState((prevState, props) => ({
        count: prevState.count + 1
      }))
    }, 1000)
  }
  render(){
    return (
      <h1>{this.state.count}</h1>
    )
  }
}

const root = document.createElement('div');
root.id = 'app';
document.body.appendChild(root);

ReactDOM.render(
  <Counter />,
  document.querySelector('#app')
);

私は自分のコードでReact.createClassとPropTypesを使用していません。コードがReact.createClassとPropTypesにコードを変換しているようです。それを修正する方法は？

javascriptreactjsbabel
34
TangMonk

React 15.5.0には、React 16で発生する変更に属する新しい警告が含まれています。この警告は、実際には新しい方法を実装する必要があることを示していますを使用していますが、16）で廃止される予定です。

React.createClass、2つのオプションがあります。最初の1つは、単純なJS構文を使用することです。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

またはcreate-react-classモジュールを使用します（npmで利用可能）：

// Before (15.4 and below)
var React = require('react');

var Component = React.createClass({
  mixins: [MixinA],
  render() {
    return <Child />;
  }
});

// After (15.5)
var React = require('react');
var createReactClass = require('create-react-class');

var Component = createReactClass({
  mixins: [MixinA],
  render() {
    return <Child />;
  }
});

PropTypes警告については、PropTypesを使用するモジュールを使用しているかどうかを確認してください。外部モジュールからのものである場合があります。

とにかく、それについてもっと読むために、あなたは それらの変更に関するFacebookブログ投稿

11
Idan Gozlan

Reactv15.5.0実装 新しい警告

Reactへのダウングレード15.4.x

npm install --save [email protected] [email protected]
5
Vituzan Siva

React.createClassおよびReact.PropTypesは、v15.5で非推奨になりました。

一部のピア/依存関係は、React.createClassおよびReact.PropTypesとともにReact:^15.4（または他のバージョン）を使用する必要があります。これは、Reactバージョンと非常に互換性があります。したがって、そこのコードに対して警告を取得します。

15.5の変更については このリンク を参照してください

https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html

4
Vikas Sardana

Reactをインポートしていたため、警告が存在することがわかりました。

import * as React from 'react'

これを

import React from 'react'

警告を非表示にします

4
Ivo Bosticky

これは答えではなく、もう1つ追加するだけです。まだコメントできません。

React-bootstrap 0.30.8をreact 15.5.3と一緒に使用しても同じことがわかりました。

警告：Uncontrolled（Dropdown）：React.createClassは非推奨であり、バージョン16で削除されます。代わりにプレーンなJavaScriptクラスを使用してください。まだ移行の準備が整っていない場合は、npmでcreate-react-classをドロップインの代替として使用できます。

私が入る：uncontrollable/createUncontrollable.js --->

var component = _react2.default.createClass(_extends({

[email protected]はreact-bootstrap 0.30.8の一部です

そして

警告：メインReactパッケージを介したPropTypesへのアクセスは非推奨です。代わりに、npmのprop-typesパッケージを使用してください。

react-bootstrap/es/PanelGroup.js --->

accordion: React.PropTypes.bool

React-bootstrapはまだ十分ではないため、reactをダウングレードすることが回避策の唯一の方法だと思います。

0
davey