web-dev-qa-db-fra.com

Désactiver les avertissements désapprouvés de React.createClass et PropTypes dans babel react present

Au plus tard React 15.5.1, Si vous utilisez babel react, présent pour résoudre le fichier jsx, apparaîtra après les avertissements:

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.

Mon code est le suivant:

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')
);

Je n'utilise pas React.createClass et PropTypes dans mon code, il semble que Babel ait transformé mon code en React.createClass et PropTypes, comment résoudre ce problème?

javascriptreactjsbabel
34
TangMonk

React 15.5.0 contient de nouveaux avertissements appartenant aux modifications qui entrent en vigueur React 16, l’avertissement que vous recevez, indique en fait que vous devez implémenter la nouvelle façon que vous utilisez va être obsolète sur 16).

React.createClass, vous avez 2 options, la première consiste simplement à utiliser la syntaxe JS simple:

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

ou utilisez le create-react-class module (disponible sur 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 />;
  }
});

À propos de l'avertissement PropTypes, vérifiez si vous utilisez un module utilisant PropTypes, qui provient parfois d'un élément externe.

Quoi qu’il en soit, pour en savoir plus à ce sujet, vous êtes le bienvenu Blog de Facebook sur ces changements

11
Idan Gozlan

React v15.5.0 implémente nouveaux avertissements

Déclassement React en 15.4.x fonctionne pour moi

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

React.createClass et React.PropTypes est obsolète en v15.5.

Certains pairs/dépendances doivent utiliser React.createClass et React.PropTypes avec React:^15.4 (ou toute autre version), qui est très compatible avec votre version de réaction. Donc, mettre en garde pour le code.

Veuillez vous référer à ce lien pour 15.5 modifications

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

4
Vikas Sardana

J'ai trouvé que l'avertissement était présent parce que j'importais React avec

import * as React from 'react'

changer cela pour

import React from 'react'

fait disparaître les avertissements

4
Ivo Bosticky

Ce n'est pas une réponse, juste une dernière chose à ajouter, car je ne peux pas encore commenter :-( Peut-être que quelqu'un d'autre a le même problème avec react-bootstrap

J'ai eu la même chose lorsque j'utilise react-bootstrap 0.30.8 avec react 15.5.3.

Avertissement: Non contrôlé (liste déroulante): React.createClass est obsolète et sera supprimé de la version 16. Utilisez plutôt des classes JavaScript simples. Si vous n'êtes pas encore prêt à migrer, create-react-class est disponible sur npm en remplacement immédiat.

J'arrive dans: uncontrollable/createUncontrollable.js --->

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

[email protected] est un dep de react-bootstrap 0.30.8

et

Avertissement: Accéder aux PropTypes via le package principal React est obsolète. Utilisez plutôt le package prop-types de npm.

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

accordion: React.PropTypes.bool

Je pense que le déclassement réagit est le seul moyen de contourner ce problème, car réagir-bootstrap n'est pas encore assez loin.

0
davey