如何解决反应,引导导航
我是 React 世界的新手,并坚持从头开始。
尝试使用 react-bootstrap 制作 Nav 菜单。在 Nav.Item 更改之前,一切正常。 onSelect() 应该更改 activeKey,从而更改单击的 Nav.Item 的样式。
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,document.getElementById('root')
);
App.tsx:
import NavMenu from "./components/NavMenu";
const navItems: any = [
{id: 0,name: "Home",link:"home"},{id: 1,name: "First",link:"first"},{id: 2,name: "Second",link:"second"}
]
const App = () => {
return (
<>
<NavMenu navItems={navItems}/>
</>
);
}
export default App;
NavMenu/idnex.tsx:
import {useState} from "react";
import {Nav} from "react-bootstrap";
const NavMenu = (props: any) => {
const {navItems} = props;
const [activeNav,setActiveNav] = useState('first')
const handleClick = (eventKey: any) => setActiveNav(eventKey);
console.log(activeNav)
return (
<div>
<Nav
defaultActiveKey="home"
className="flex-column"
activeKey={activeNav}
variant="pills"
navbar={true}
onSelect={handleClick}
>
{ navItems.map((item: any) => {
const {id,link,name} = item;
return (
<Nav.Item key={id}>
<Nav.Link href={link}
eventKey={link}>
{name}
</Nav.Link>
</Nav.Item>
);
})}
</Nav>
</div>
);
}
export default NavMenu;
package.json:
{
"name": "nav-test-case","version": "0.1.0","private": true,"dependencies": {
"@testing-library/jest-dom": "^5.11.4","@testing-library/react": "^11.1.0","@testing-library/user-event": "^12.1.10","react": "^17.0.1","react-dom": "^17.0.1","react-scripts": "4.0.1","react-bootstrap": "1.4.0","web-vitals": "^0.2.4","bootstrap": "4.5.3","typescript": "^4.1.3"
},"scripts": {
"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"
},"eslintConfig": {
"extends": [
"react-app","react-app/jest"
]
},"browserslist": {
"production": [
">0.2%","not dead","not op_mini all"
],"development": [
"last 1 chrome version","last 1 firefox version","last 1 safari version"
]
}
}
更改一会是可见的,然后它只是回滚到默认设置的 Nav.Item。 所以它没有选择点击Nav.Item,而不是默认设置。
在控制台中,我看到日志中的变量发生了变化
console.log(activeNav)
但是整个页面刷新并且日志也被重置
请如果有人能指出我正确的方向以找出我做错了什么
解决方法
据我所知,您希望在应用内使用链接 - 但您所做的只是实现指向外部页面的链接的方式。
要走的路是使用 react-router-dom
。
- 使用您的包管理器添加
react-router-dom
。 - 使用
BrowserRouter
包装您的应用程序,并在Switch
中定义您的页面可能的路由,该<StrictMode> <BrowserRouter> <Switch> <Route exact path="/" component={App} /> <Route exact path="/home" component={App} /> <Route exact path="/first" component={App} /> <Route exact path="/second" component={App} /> </Switch> </BrowserRouter> </StrictMode>,
定义了您的应用程序的所有可能页面和相应的组件。
Link
- 使用
react-router-dom
中的<Nav.Item key={id}> <Nav.Link as={Link} to={link} eventKey={link}> {name} </Nav.Link> </Nav.Item>
组件并将您的导航链接声明为:
Polyline polyline = new Polyline
{
StrokeColor = Color.Blue,StrokeWidth = 12
}
polyline.GeoPath.Add(new Position)
应该是这样。 你可以在这里看到它的工作:https://codesandbox.io/s/competent-cherry-8hnu9
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。