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

Question

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

  

＆＃34; PageContainer（...）：React组件类必须扩展React.Component。＆＃34;

我的代码看起来像这样

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开始，不推荐使用不带扩展React.Component的ES6类实现的组件。他们应该延长React.Component（就像警告所说的那样）：

class Component extends React.Component {

}

来自official blog post：

  

ES6组件类现在必须扩展React.Component以启用无状态函数组件。 ES3 module pattern将继续有效。

从github存储库中我看到react-page-transition实现为

var PageContainer = React.createClass({
})

所以有问题

要解决它，你可以做的就是一旦你完成了npm install 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

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

var Signup = React.createClass({

   //your code goes here

});

编辑：只是从他们的github回购中看到了他们的抱怨数量，你可以从下面的网址查看，

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

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

或者您可以尝试react-motion从以下网址

进行检查

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