Typcript React React.createElement: type не должен быть null, undefined, boolean или number

Question

Я использую 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") 
); 

Answer 1

Является ли ваш реагировать версии, совместимые с вашей реакции-самозагрузки версии, или самонастройки NAV средства? в соответствии с this, возможно, версии вызывают ошибку.

Или вы проверили реактивный маршрутизатор, потому что используете свойство Link.did вы проверяете This?

Answer 2

Большое спасибо Sahar. Оказалось, что это свойство Link, которое использует реактивный маршрутизатор. React Bootstrap не зависит от реагирующего маршрутизатора, и после прочтения ссылки, которую вы предоставили, и перечитывая документацию с реакцией-загрузкой, я смог заставить ее работать. Я попытался с примером кода, который предоставляется в ответном бутстрапе, и он работает.

вот рабочий пример в машинописном

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> 

    ); 
}