渲染组件与反应路由器

我正在研究一个新的项目，并且对于React来说是非常新的。我们正在使用打字稿（TSX）。到目前为止，我有一个index.html文件，其中一个ID为“root”的div。我有一个main.tsx文件，我相信这是我的主要组件。这里是代码渲染组件与反应路由器

/// <reference path="../../../../typings/main.d.ts"/> 

require('file?name=[name].[ext]!../../index.html'); 

/*----------- STYLESHEETS -----------*/ 
require('flexboxgrid/css/flexboxgrid.css'); 

/*=============================================>>>>> 
= MODULES = 
===============================================>>>>>*/ 

import * as React from 'react'; 
import { render } from 'react-dom'; 
import { Router, Route, IndexRoute, browserHistory } from 'react-router'; 

/*----------- ROUTE COMPONENTS -----------*/ 
import Root from './common/root.tsx'; 
import Home from './home/home.tsx'; 
import Login from './login/login.tsx'; 
// 
// /*= End of MODULES =*/ 
// /*=============================================<<<<<*/ 

render((
    <Router history={browserHistory}> 
    {/** ###### HOME ROUTE ###### */} 
    <Route path="/" component={Root}> 
     <IndexRoute component={Home}/> 
     <Route path="/login" component={Login}/> 
    </Route> 
    {/** ###### END HOME ROUTES ###### */} 
    </Router> 
), document.getElementById('root'));

我不确定如何做我的root.tsx文件，以便它显示在我的根div。这是我迄今为止的root.tsx文件。

"use strict"; 

import React from 'react'; 

class Root extends React.Component { 
    render() { 
    return(
     <div> 
      <h1>About page!</h1> 
     </div> 
    ) 
    } 
} 
export default Root;

来源

2016-04-18 ceckenrode

你的代码是混乱的。第一块是什么，第二块是什么？为什么第一个注释掉了？ –

除了被注释掉之外，代码看起来也很好。你是否在控制台中发现错误？ – azium

它被注释掉，因为它根本不起作用，我正在尝试其他的东西。现在取消注释。是的，我有一些错误，看起来很重要的是root.tsx？f149：5 Uncaught TypeError：无法读取未定义的属性'Component' – ceckenrode

在您的评论

root.tsx?f149:5 Uncaught TypeError: Cannot read property 'Component' of undefined

React基于错误说明在（下）第5行是不明确的，所以一定有什么不能与你import声明的工作：

class Root extends React.Component

我建议以与您在0中所做的相同的方式导入它。

import * as React from 'react'

，而不是

import React from 'react';

来源

2016-04-18 22:11:05

这解决了我的问题！ – ceckenrode

渲染组件与反应路由器

回答

相关问题