警告：PageContainer(...)：React 组件类必须扩展 React.Component答案

【问题标题】：warning: PageContainer(...): React component classes must extend React.Component警告：PageContainer(...)：React 组件类必须扩展 React.Component
【发布时间】：2016-08-27 19:20:46
【问题描述】：

我正在尝试使用 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;

我做错了什么？

【问题讨论】：

标签： javascript reactjs react-native css-transitions

【解决方案1】：

从 React v0.14 开始，组件实现为 ES6 类没有扩展 React.Component 已被弃用。他们应该扩展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

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

【讨论】：

在 node_modules 中你会看到 PageContainer。进入它的 src 文件夹并进入 index.js。对 PageContainer 类的更改扩展了 React.Component 并为 getInitialState 用构造函数替换它
我正在使用这个“github.com/srn/react-webpack-boilerplate”，我可以在其中找到一个文件..你能通过teamviewer进入我的电脑来指导我吗？我会感谢你的人。
这可能吗？
我的笔记本电脑上没有teamviewer。
我找不到文件*******

【解决方案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 存储库中看到了他们抱怨它的人数，您可以从下面的 url 检查它，

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

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

或者你可以试试react-motion从下面的网址查看，

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

【讨论】：