如何解决根据路线有条件地渲染CSS反应
到目前为止,这是我的App.js组件:
function App() {
return (
<div className="App">
<Router>
<NavBar />
<Switch>
<Route exact path='/' component={HomepageLayout} />
<Route exact path='/post/:id' component={Post}/>
</Switch>
</Router>
</div>
);
}
我需要根据要渲染的路由来渲染类的CSS值。呈现HomepageLayout组件时,我需要以下内容:
styles.css
.ui.inverted.vertical.center.aligned.segment{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
z-index: 2;
}
然后,我需要在渲染Post组件时更改此目标的值,以便基本上删除样式:
styles.css
.ui.inverted.vertical.center.aligned.segment{
position: none;
left: none;
top: none;
width: none;
z-index: none;
}
有没有一种方法可以根据路由来更改特定CSS类标签的样式?我已经看到了使用的示例,但是有一种方法可以使用/吗?
解决方法
像这样使用它
<Component header />
// component
const Component = ({header}) => {
const conditionalClass = header ? 'yesHeader' : 'noHeader';
return (
<p className={conditionalClass}>this is </p>
)
}
您也可以使用this
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。