警告：PageContainer（…）：React组件类必须扩展React.Component

Question

我正在尝试使用react-page-transitions，并且收到此警告：

“ PageContainer（...）：React组件类必须扩展React.Component。”

我的代码看起来像这样

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;

我究竟做错了什么？

Answer 1

从React v0.14开始， 不推荐使用实现为ES6类而不扩展React.Component组件。 他们应该扩展React.Component （就像警告中所说的那样）：

class Component extends React.Component {

}

从官方博客文章 ：

现在，ES6组件类必须扩展React.Component才能启用无状态功能组件。 ES3模块模式将继续起作用。

从github仓库中，我看到react-page-transition被实现为

var PageContainer = React.createClass({
})

所以有问题

要解决它，您可以做的是，一旦完成npm，就安装react-page-transition，只需转到node_modules并使用ES6结构编辑代码即可。

编辑

好的，要解决此问题，只需创建一个新文件PageContainer.js并在其中写入以下代码

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

并导入为

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

你也需要做

npm install -S velocity-animate

我认为这将解决问题。 让我知道我还没有测试过。

Answer 2

您需要选择import软件包或使用var来要求模块，因为在这种情况下， react-page-transitions不会随本机es6模块一起提供，您最好像下面这样尝试，或者您可以更改react-page-transitions的代码react-page-transitions

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

var Signup = React.createClass({

   //your code goes here

});

编辑：刚从他们的github仓库中看到它，他们抱怨的人很多，您可以从下面的URL检查它，

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

所以要使用react-page-transitions您必须更新一些代码

或者您可以尝试通过以下网址进行react-motion检查，

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