Question

import {Route, IndexRoute} from 'react-router'
import App from './App'
import Home from './Home'
import Repos from './Repos'
import Repo from './Repo'
import About from './About'

module.exports = (
    <Route path="/" component={App}>
        <IndexRoute component={Home} />
        <Route path="/repos" component={Repos}>
            <Route path="/repos/:userName/:repoName" component={Repo} />
        </Route>
        <Route path="/about" component={About}/>
    </Route>
)

我没想到必须在这里导入React。当然，修复很容易。我只需要添加以下内容：

import React from 'react'

令我感到困惑的是，我在上面粘贴的代码示例中没有明确使用React。我想当将Babel / JSX代码转换为JavaScript时需要它吗？

你能告诉我为什么我需要在这里导入React吗？

Answer 1

您是正确的，Babel编写的代码将使用React。

您可以使用"try it out" feature of the Babel website自行检查，了解您的代码将被转化为什么。

在您的情况下，您将获得

"use strict";

module.exports = React.createElement(
    Route,
    { path: "/", component: App },
    React.createElement(IndexRoute, { component: Home }),
    React.createElement(
        Route,
        { path: "/repos", component: Repos },
        React.createElement(Route, { path: "/repos/:userName/:repoName", component: Repo })
    ),
    React.createElement(Route, { path: "/about", component: About })
);

如您所见，React.createElement被多次调用。

为什么抛出这个异常？未捕获的ReferenceError：未定义React

1 个答案: