ReactJS错误:React-bootstrap通过React/JSX-No-undef

Question

我想在项目中使用菜单栏。首先，我从React-Bootstrap中选择它，但程序显示了有关" React/Jsx-No-undef"的错误。

这是React-Bootstrap网站的代码。

const navbarInstance = (
<Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">React-Bootstrap</a>
      </Navbar.Brand>
    </Navbar.Header>
    <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.4}>Separated link</MenuItem>
      </NavDropdown>
    </Nav>
  </Navbar>
);
ReactDOM.render(navbarInstance, mountNode);

Answer 1

对我来说是：

使用破坏性导入ReactBoostrap及其所有组件：

import ReactBootstrap, {Jumbotron, Button, Col, Grid, Panel, FormGroup} from 'react-bootstrap'

使用：

class HelloWorld extends Component {
    render() {
        return (
            <div className="container">
            <Jumbotron>
                <p>Bootstrap is workings? </p>
                <div className="my-class-from-react">
                    <h1>Hello World from React.js</h1>
                </div>
            </Jumbotron>
            </div>
        )
    }
}
export default HelloWorld;