Uncaught TypeError: Cannot read property 'CSSTransitionGroup' of undefined, react addons

Question

我需要使用 React 插件 ReactCSSTransitionGroup，但我仍然遇到错误 Uncaught TypeError: Cannot read 属性 'CSSTransitionGroup' of undefined。

我有 React、react-dom 和 ReactCSSTransitionGroup v: 15.4.2，所以应该没有问题。我已经通过 mpn.

安装了 react-addons-css-transition-group

import React, { PropTypes } from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
const ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

我添加到webpack配置

externals: {
  'react/addons': true,
  'react/lib/ExecutionEnvironment': true,
  'react/lib/ReactContext': true
  }

但没用

我在 index.js（在 Alert 文件夹中）中使用它：

import React, { PropTypes } from 'react';
import BasicAlert from './basicAlert';

import {
    alertsWrapper,
    enter,
    enterActive,
    leave,
    leaveActive,
} from './alertsHandler.scss';

import CSSTransitionGroup from 'react-addons-css-transition-group';
//const ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

const AlertsHandler = ({ closeTime, alerts = [] }) => (
    <div className={alertsWrapper}>
        <ReactCSSTransitionGroup
            transitionName={{
                enter,
                enterActive,
                leave,
                leaveActive,
            }}
            transitionEnterTimeout={500}
            transitionLeaveTimeout={500}
        >
            {alerts.map(item => (
                <BasicAlert
                    closeTime={closeTime}
                    {...item}
                    key={`alert${item.id}`}
                />
                ))}
        </ReactCSSTransitionGroup>
    </div>
);


AlertsHandler.propTypes = {
    closeTime: PropTypes.number,
    alerts: PropTypes.arrayOf(PropTypes.shape({
       id: PropTypes.string,
        type: PropTypes.string,
        alertContent: PropTypes.node,
        repeated: PropTypes.number,
    })),
};

export default AlertsHandler;

并在 App.js 中导入：

import React from 'react';
import Alert from '../components/Alerts';

var example = 'whatever';

export default class App extends React.Component {
  render() {
    return (
     <div>
        <Alert closeTime={3000} alerts={example} />
      </div>);
  }
}

我尝试导入：import React, { PropTypes } from 'react/addons';并从 'react' 导入 { __Addons as addons, PropTypes } 但它给我错误 cannot read 属性 addons of undefine。我什至尝试直接从 node_modules 导入或使用折旧模块 react-addons。

我不确定，但我认为导入 react-with-addons 有问题，但我找不到正确的方法。

如果我给的信息少，请追问。

Answer 1

ReactCSSTransitionGroup 不是主 React 包的导出。

只需删除第三行const ReactCSSTransitionGroup = ...。

import React, { PropTypes } from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

这应该有效

更新 1:
后续抛出的错误可以这样解决

在 index.js（在警报文件夹中）：

import React, { PropTypes } from 'react';
...
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
//const ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

const AlertsHandler = ({ closeTime, alerts = [] }) => (
    <div className={alertsWrapper}>
        <ReactCSSTransitionGroup
            ...
        </ReactCSSTransitionGroup>
    </div>
);
...

Answer 2

就我而言，我在我的 CSSTransition 组件上使用了 className 道具。应该是classNames。花了几个小时弄清楚...只是发帖以防对某人有帮助。

Uncaught TypeError: Cannot read property 'CSSTransitionGroup' of undefined, react addons

Uncaught TypeError: Cannot read property 'CSSTransitionGroup' of undefined, react addons

reactjs

add-on