m03a3a17 m03a3a17 - 3 months ago 27
Javascript Question

warning: PageContainer(...): React component classes must extend React.Component

I am trying to use react-page-transitions and I am getting this warning:


"PageContainer(...): React component classes must extend React.Component."


my code looks like this

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;


What am I doing wrong?

Answer

From React v0.14 on, components implemented as ES6 classes without extending React.Component are deprecated. They should extend React.Component (just like the warning says):

class Component extends React.Component {

}

From the official blog post:

ES6 component classes must now extend React.Component in order to enable stateless function components. The ES3 module pattern will continue to work.

From the github repository I see that react-page-transition is implemented as

var PageContainer = React.createClass({
})

So there is the problem

To solve it what you can do it is that once you have done npm install react-page-transition, just go to the node_modules and edit the code using ES6 structure and it will work.

EDIT

Okay so to get around it just create a new file PageContainer.js and write the following code in it

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

and import this as

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

also you will need to do

npm install -S velocity-animate

I think this will solve the problem. Let me know I haven't tested it.

Comments