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;