Question

我要疯了，我正在构建一些示例以学习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

我用来扩展react组件的内部组件

class mycomponent extends Component

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

我希望提出适当的建议以使路由器和过渡工作正常：）

React检查`Route`的渲染方法

0 个答案: