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

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

Answer 2

ReactCSSTransitionGroup不是主React包的导出。

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

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

这应该有效

更新1 ：
抛出后续错误可以像这样解决

在index.js中（在Alert文件夹中）：

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>
);
...

未捕获的TypeError：无法读取未定义的属性“CSSTransitionGroup”，反应插件

2 个答案: