我正在使用TypeScript(1.8.10)并学习反应。我使用React-Bootstrap构建一个简单的导航作为示例,我收到以下错误。错误会阻止dom渲染。我是全新的反应所以不确定我在这里做错了什么。非常感谢您提供任何帮助或指示以解决此错误。
// A '.tsx' file enables JSX support in the TypeScript compiler,
// for more information see the following page on the TypeScript wiki:
// https://github.com/Microsoft/TypeScript/wiki/JSX
/// <reference path="./../../../typings/index.d.ts" />
import * as React from 'react';
import * as ReactBootstrap from 'react-bootstrap';
interface INavigationProps {
}
let Navbar = ReactBootstrap.Navbar;
let NavItem = ReactBootstrap.NavItem;
let MenuItem = ReactBootstrap.MenuItem;
let NavbarHeader = ReactBootstrap.NavbarHeader;
const dropdownItems = [
{ href: '#', name: 'Overview' },
{ href: '#', name: 'Setup' },
{ href: '#', name: 'Usage' },
];
export default class Navigation extends React.Component<INavigationProps, {}> {
render() {
return (
<Navbar>
<NavbarHeader href="homepage.html" name="Website Name"/>
<NavItem>
<MenuItem link="about.html" title="About" />
<MenuItem link="contact.html" title="Contact" />
<MenuItem link="services.html" title="Services" />
</NavItem>
</Navbar>
);
}
}
// A '.tsx' file enables JSX support in the TypeScript compiler,
// for more information see the following page on the TypeScript wiki:
// https://github.com/Microsoft/TypeScript/wiki/JSX
/// <reference path="./../../typings/index.d.ts" />
import * as React from "react";
import * as ReactDOM from "react-dom";
import * as ReactBootstrap from 'react-bootstrap';
import HeaderNavigation from "./NavigationComponent/navigation";
import Hello from "./HelloComponent/Hello";
ReactDOM.render(
<div>
<HeaderNavigation />
<Hello name="Athraya" />
</div>,
document.getElementById("root")
);
答案 0 :(得分:0)
您的反应版本是否与您的react-bootstrap版本或引导NAV设施兼容? 根据{{3}},可能版本会导致错误。
或者你检查了react-router,因为你正在使用Link property.did,你检查this?
答案 1 :(得分:0)
非常感谢Sahar。原来是使用react-router的Link Property。 React Bootstrap不依赖于反应路由器,在阅读了您提供的链接并重新阅读react-bootstrap文档后,我能够使其正常工作。我尝试使用react bootstrap中提供的示例代码,它可以工作。
这是Typescript
中的工作示例export default class Navigation extends React.Component<INavigationProps, {}> {
render() {
return (
<Navbar inverse>
<Navbar.Header>
<Navbar.Brand>
<a href="#">React-Bootstrap</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">Link</NavItem>
<NavItem eventKey={2} href="#">Link</NavItem>
<NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
<MenuItem eventKey={3.1}>Action</MenuItem>
<MenuItem eventKey={3.2}>Another action</MenuItem>
<MenuItem eventKey={3.3}>Something else here</MenuItem>
<MenuItem divider />
<MenuItem eventKey={3.3}>Separated link</MenuItem>
</NavDropdown>
</Nav>
<Nav pullRight>
<NavItem eventKey={1} href="#">Link Right</NavItem>
<NavItem eventKey={2} href="#">Link Right</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}