Warnung: PageContainer (...): Reagieren Komponentenklassen müssen React.Component verlängern

Question

Ich versuche react-page-transitions zu verwenden und ich erhalte diese Warnung:

„PageContainer (...): Reagieren Komponentenklassen muss React.Component erweitern. "

mein Code sieht wie folgt aus

import React from 'react'; 
import {Link} from "react-router"; 
import {withRouter} from 'react-router'; 
import firebase_det from '../../details_data/firebase'; 

var firebase = require('firebase'); 
var AppActions = require('../../Action/AppActions'); 
var AppStore = require('../../Stores/AppStore'); 
import Formsy from 'formsy-react'; 
var CryptoJS = require("crypto-js"); 
import MyOwnInput from '../Testing/MyOwnInput'; 
var ReactCSSTransitionGroup = require('react-addons-css-transition-group'); 
var PageContainer = require('react-page-transitions'); 

class Signup extends React.Component { 

    constructor(props){ 
    super(props); 
    this.state = {}; 
    } 

    render() { 
    return (
     <PageContainer> 
     <div> </div> 
     </PageContainer> 
    ) 
    } 
} 

export default Signup; 

Was mache ich falsch?

Answer 1

Ab React v0.14 sind Komponenten, die als ES6-Klassen ohne extending React.Component implementiert sind, veraltet. Sie sollten React.Component verlängern (wie die Warnung sagt):

class Component extends React.Component { 

} 

Vom official blog post:

ES6 Komponentenklassen müssen jetzt erweitern React.Component um staatenlos Funktionskomponenten zu ermöglichen. Die ES3 module pattern wird weiterhin funktionieren.

Vom Github-Repository Ich sehe, dass reagieren-Seite-Übergang als

var PageContainer = React.createClass({ 
}) 

es so implementiert ist, ist das Problem

es zu lösen, was Sie es tun können, ist, dass, sobald Sie haben fertig npm install react-page-transition, gehe einfach zu den node_modules und bearbeite den code mit ES6 structure und es wird funktionieren.

EDIT

Okay, so zu umgehen, es ist nur eine neue Datei PageContainer.js erstellen und darin

'use strict'; 

import React from 'react'; 
import Velocity from 'velocity-animate'; 

export default class PageContainer extends React.Component{ 
    constructor(props) { 
     super(props); 

     this.state = { 
      mounted: false, 
      startStyles: { 
       'translateX': '100%' 
      }, 
      endStyles: { 
       'translateX': 0 
      }, 
      easing: 'swing', 
      duration: 400, 
      callback: function() { 

      } 
     } 
    } 
    componentWillMount() { 
     this.setState(this.props); 
    } 
    componentDidMount() { 
     var me = this; 

     // Hook styles 
     for (var key in this.state.startStyles) { 
      Velocity.hook(this.getDOMNode(), key, this.state.startStyles[key]); 
     } 

     this.setState({ mounted: true }); 
     this.getDOMNode().style.display = 'block'; 

     var options = { 
      duration: this.state.duration, 
      easing: this.state.easing, 
      complete: function() { 
       me.getDOMNode().classList.add('loaded-page'); 
       me.state.callback(); 
      } 
     }; 

     Velocity(this.getDOMNode(), 
      this.state.endStyles, 
      options 
     ); 
    }, 
    render() { 
     var child; 
     var classString = 'page-content ' + this.props.className; 
     if(this.state.mounted){ 
      child = (<div>{this.props.children}</div>); 
     } 
     return (
      <section className="page-content" style={{display: 'none'}}> 
       {child} 
      </section> 
     ); 
    } 
} 

und importieren diese als

import PageContainer from './path/to/PageContainer' 

auch den folgenden Code schreiben muss

npm install -S velocity-animate 

tun

Ich denke, das wird das Problem lösen. Lass es mich wissen, ich habe es nicht getestet.

Answer 2

benötigen Sie entweder import Ihre Pakete oder mit var, um die Module erfordern, wie in diesem Fall react-page-transitions nicht kommen mit nativen es6 Module zu wählen, sollten Sie besser versuchen, wie unten oder Sie können den Code von react-page-transitions

ändern

var React = require('react'); 
var PageContainer = require('react-page-transitions'); 

var Signup = React.createClass({ 

    //your code goes here 

}); 

EDIT: sah mich nur von ihrem github repos ist ihre Zahl von Menschen darüber zu beschweren Sie es von der folgenden uRL überprüfen,

https://github.com/jaing/react-page-transitions/issues/4

so react-page-transitions Sie einen Code

aktualisieren müssen, oder Sie können react-motion überprüfen Sie es aus der unten stehenden URL,

https://github.com/chenglou/react-motion