警告: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开始，没有扩展React.Component的ES6类实现的组件被弃用。它们应该扩展React.Component(就像警告所说的那样):

class Component extends React.Component {
}

摘自官方博客:

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

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

var PageContainer = React.createClass({
})

这就是问题所在

要解决这个问题，你可以做的是，一旦你完成了npm install react-page-transition，只需转到node_modules并使用ES6结构编辑代码，它就会工作了。

编辑

要绕过它只需创建一个新文件pageconcontainer。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 repos中看到它，他们有很多人抱怨它，你可以从下面的url查看它，

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

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

或者您可以尝试react-motion从下面的url检查它，

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