如何在不使用節點/導入的情況下在ReactJS的NavItem中使用Link

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>在NavItem獲取nav-link如下所示

<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 個解決方案

解決方案1
0 2017-12-21 11:29:05

解決方案2
0 2018-01-16 06:00:37

如何在不使用節點/導入的情況下在ReactJS的NavItem中使用Link

問題描述

2 個解決方案

解決方案1 0 2017-12-21 11:29:05

解決方案2 0 2018-01-16 06:00:37

解決方案1
0 2017-12-21 11:29:05

解決方案2
0 2018-01-16 06:00:37