为什么抛出这个异常？ Uncaught ReferenceError：未定义反应

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' 

更令人不解让我看到做出反应并没有明确的代码示例我上面粘贴的使用。我猜这是Babel/JSX代码被转译为JavaScript时需要的吗？

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

Answer 1

你是对的，巴贝尔运输的代码将使用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被多次调用。