0

正如这里的答案中提到的：为什么 react-addons-css-transition-group 在这里不起作用？，我尝试使用该react-transition-group模块，但是当我开始反应时它给出了以下错误。我该如何解决 ？

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `TransitionGroup`.
    at invariant (invariant.js:41)
    at getFiberTagFromObjectType (react-dom.development.js:10173)
    at createFiberFromElement (react-dom.development.js:10130)
    at createChild (react-dom.development.js:12553)
    at reconcileChildrenArray (react-dom.development.js:12822)
    at reconcileChildFibers (react-dom.development.js:13164)
    at reconcileChildrenAtExpirationTime (react-dom.development.js:13551)
    at reconcileChildren (react-dom.development.js:13542)
    at updateHostComponent (react-dom.development.js:13885)
    at beginWork (react-dom.development.js:14390)
    at performUnitOfWork (react-dom.development.js:16627)
    at workLoop (react-dom.development.js:16667)
    at renderRoot (react-dom.development.js:16704)
    at performWorkOnRoot (react-dom.development.js:17352)
    at performWork (react-dom.development.js:17274)
    at performSyncWork (react-dom.development.js:17247)
    at requestWork (react-dom.development.js:17137)
    at scheduleWork$1 (react-dom.development.js:17000)
    at scheduleRootUpdate (react-dom.development.js:17594)
    at updateContainerAtExpirationTime (react-dom.development.js:17620)
    at updateContainer (react-dom.development.js:17651)
    at ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:17950)
    at react-dom.development.js:18104
    at unbatchedUpdates (react-dom.development.js:17483)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:18100)
    at Object.render (react-dom.development.js:18164)
    at Module../src/index.js (index.js:10)
    at __webpack_require__ (bootstrap:782)
    at fn (bootstrap:150)
    at Object.0 (RootStore.js:9)
    at __webpack_require__ (bootstrap:782)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1


The above error occurred in the <span> component:
    in span (created by TransitionGroup)
    in TransitionGroup (at VariableSelector.js:288)
    in div (at VariableSelector.js:282)
    in VariableDefinitions (created by Connect(VariableDefinitions))
    in Connect(VariableDefinitions) (at App.js:21)
    in App (created by Connect(App))
    in Connect(App) (at index.js:10)
    in Provider (at index.js:10)

这是我的反应代码：-

import { TransitionGroup, CSSTransition } from 'react-transition-group';
class VariableDefinitions extends Component {

  render() {
    const { idToVarStates, addVariable, currentTab } = this.props;


    const varHtmlList = Object.keys(idToVarStates).map(id => {
      return (

        <CSSTransition
          key={id}
          timeout={1000}
          classNames="fade"
        >
          <VariableDefine id={id} key={id} {...this.props} />
        </CSSTransition>

      );
    })


    return (
      <div style={{ display: currentTab === 'define' || "none" }}>

        <div className="text-center mt-4">
          <h2>Variables and Constraints</h2>
        </div>

        <TransitionGroup className="todo-list">
          {varHtmlList}
        </TransitionGroup>

        <div className="text-center">
          <div onClick={addVariable} className="btn btn-info btn-sm">
            <i className="fa fa-plus"></i>
          </div>
        </div>

        <br /><br /><br />

      </div>);
  }
}
4

0 回答 0