Typescript React React.createElement：类型不应为 null、未定义、布尔值或数字答案

【问题标题】：Typescript React React.createElement: type should not be null, undefined, boolean, or numberTypescript React React.createElement：类型不应为 null、未定义、布尔值或数字
【发布时间】：2017-01-20 13:39:17
【问题描述】：

我正在使用 TypeScript(1.8.10) 并学习 react。我正在使用 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")
);

【问题讨论】：

组件不是叫Navigation，不是HeaderNavigation吗？
@andrew headernavigation 只是一个标签，如您所见，它指向导航模块

标签： reactjs react-bootstrap typescript1.8

【解决方案1】：

您的 react 版本是否与您的 react-bootstrap 版本或 bootstrap NAV 工具兼容？根据this，可能是版本导致了错误。

或者您是否检查了 react-router，因为您使用的是 Link 属性。您检查了This吗？

【讨论】：

【解决方案2】：

非常感谢萨哈尔。原来是使用 react-router 的 Link 属性。 React Bootstrap 不依赖于 react 路由器，在阅读了您提供的链接并重新阅读 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>

    );
}

【讨论】：