我正在使用 react 路由器和语义用户界面侧边栏。当侧边栏在可见和不可见之间切换时,路由器会触发其组件 (OilBarrelComponent
) 重新创建(而不仅仅是“推送”)。这似乎是不必要的,并且有我不想要的副作用。我的代码是否有问题导致 OilBarrelContainer
组件因为我切换侧边栏而被重新创建?
import {BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom';
import {Sidebar, Segment, Button, Menu, Icon} from 'semantic-ui-react'
toggleSidebarVisibility = () => this.setState({ sidebarVisible: !this.state.sidebarVisible })
render() {
const { sidebarVisible } = this.state
return (
<Router history={history}>
<div>
<Sidebar.Pushable className="phsidebar" as={Segment}>
<Sidebar as={Menu} animation='push' width='thin' visible={sidebarVisible} icon='labeled' vertical inverted>
<Menu.Item className="sidebaritem" as={Link} to='/oilbarrel'>
Gauge
</Menu.Item>
</Sidebar>
<Sidebar.Pusher>
<div>
<MessagesContainer/>
<Switch>
<Route exact path="/" component={() => (<Home />)}/>
<Route exact path="/oilbarrel" component={() => (<OilBarrelContainer timer={true} topMargin={0} width={300} height={400} labelText={"Diesel"}/>)}/>
</Switch>
</div>
</Sidebar.Pusher>
</Sidebar.Pushable>
</div>
</Router>
)};
最佳答案
我怀疑是你的 <Route>
的 component
props 是函数,而不仅仅是对组件类的引用。
即而不是
component={() => (<Home />)}
我认为应该是
component={Home}
我相信前一种方式会在每次渲染时重新渲染一个全新的组件,因此 React 无法断言重新渲染是不必要的。
关于reactjs - Semantic-UI Sidebar.Pusher 导致 react 路由器重新呈现其组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45066891/