未捕获的TypeError:无法读取未定义的属性"CSSTransitionGroup",反应插件

Question

我需要使用react addons,ReactCSSTransitionGroup,但我仍然有错误Uncaught TypeError:无法读取未定义的属性'CSSTransitionGroup'.

我有反应,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>);
  }
}

我尝试导入:从'react/addons'导入React,{PropTypes}; 并从'react'导入{__Addons as addons,PropTypes}但它给我错误无法读取undefine的属性插件.我甚至尝试直接从node_modules导入或使用折旧模块react-addons.

我不确定,但我认为导入反应加插件有问题,但我找不到合适的方法来做到这一点.

如果我提供的信息较少,请询问.

Answer 1

就我而言,我className在我的CSSTransition组件上使用了prop.它应该是classNames.花了几个小时计算出来...只是发布,以防它有助于某人.