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

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

2 个答案: