0

我快疯了，我正在构建一些旨在学习 reactjs 的示例。实际上我撞到了TRANSITIONGROUP + ROUTER。我可以毫无问题地编译，但随后出现以下错误：

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。检查Route.

特别是它用红色标记 index.js 中的 render 方法

const root = document.getElementById('root')
if (root !== null) {
ReactDOM.render(<App /> , root)
}

它让我怀疑可能是 app.js 内部的问题

...
<Route path="/" render={(props) => <AppRoutes {...props} />} />
...

在 AppRoutes 中，我定义了所有的转换逻辑

<TransitionGroup>
    <Transition
      key={window.location.pathname}
      timeout={500}
      mountOnEnter={true}
      unmountOnExit={true}
    >
      {animation => (
        <Switch location={this.props.location}>
          <Route
            exact
            path="/"
            render={(props) => <Home {...props} animation={animation} />}
          />
          <Route
            path="/component1/"
            render={(props) => <Component1 {...props} animation={animation} />}
          />
          <Route
            path="/component2/"
            render={(props) => <Component2 {...props} animation={animation} />}
          />
        </Switch>
      )}
    </Transition>
  </TransitionGroup>

然后在单个组件中，我想获得过渡状态并应用我最喜欢的动画。

在所有情况下，我都用于进口：

import mycomponent from "mycomponent-path";

对于内部组件的导出：

export default mycomponent

我用来扩展反应组件的内部组件：

class mycomponent extends Component

我花了几天时间进行搜索和试验，结果为零。公共 github repo 中的代码： https ://github.com/acidinucleici/lezioni-react/tree/master/app04

我希望在适当的建议中使路由器和过渡工作:)

4

0 回答 0