Question

我正在Spring和ReactJS中开发一个多页面应用程序而不使用NodeJS。

的index.html：

<body>

    <div class='container'>
        <div id='root'>test</div>

    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.31.5/react-bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-bootstrap/0.24.4/ReactRouterBootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/4.2.2/react-router-dom.min.js"></script>



    <script type="text/babel" src="/public/navigation.js"></script>
    <script type="text/babel" src="/public/test.js"></script>

</body>

test.js：

ReactDOM.render(<div><TestNavigation /></div>, document.getElementById('root') );

navigation.js

var Navbar = ReactBootstrap.Navbar,
            Nav = ReactBootstrap.Nav,   
            NavItem = ReactBootstrap.NavItem;

var LinkContainer = ReactRouterBootstrap.LinkContainer;


class TestNavigation extends React.Component {
    navItemHandleClick() {
        console.log("NavItem Clicked")


      }

      render() {

    return (
      <div className="col-md-12">
          <Navbar id="navbar"collapseOnSelect>
            <Navbar.Collapse>
                <Nav >

                        <NavItem eventKey={1} href="#" >Page 1</NavItem>

                        <NavItem eventKey={2} href="#" className="navLink" onClick={this.navItemHandleClick}>Page 2</NavItem>

                        <NavItem eventKey={3} href="#" className="navLink" >Page 3</NavItem>

                </Nav>
            </Navbar.Collapse>
          </Navbar>
      </div>
    );
  }
}

我无法在NavItem中找到链接。我不想使用nodejs，因此js文件中的import语句将不起作用。请帮忙。感谢。

Answer 1

您可以使用<Navbar.Link>在nav-link中获取NavItem，如下所示

<NavItem eventKey={1} href="#">
    <Navbar.Link>Page 1</Navbar.Link>
</NavItem>

Answer 2

以下代码有效。感谢

<NavItem eventKey={1} ><Link className="navLink" to="/" id="navcolor">Home</Link></NavItem>

如何在不使用节点/导入的情况下在ReactJS中使用NavItem中的Link

2 个答案: