css - 基于路由有条件地渲染 CSS (React)
问题描述
到目前为止,这是我的 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 组件时,我需要以下内容:
样式.css
.ui.inverted.vertical.center.aligned.segment{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
z-index: 2;
}
然后,我需要在渲染 Post 组件时更改此目标的值,以便基本上删除样式:
样式.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>
)
}
你也可以使用它
推荐阅读
- python - 我想制作插入排序可视化器,排序工作但不是可视化器
- angular - Angular Universal 在请求标头中设置 set-cookies
- php - 如何从数据库中的三个表中同时获取数据
- qt - 为什么显示组合框的弹出功能在qt中不起作用?
- reactjs - 如何从材料 ui 提交自动完成的值?
- pine-script - Metastock 脚本到 Pine (Tradingview)
- c++ - [decl.constexpr].5 到底是什么意思?
- discord - Discord Bot UnhandledPromiseRejectionWarning:TypeError:generalChannel.send 不是函数
- excel - VBA打印循环没有将整个循环写入批处理文件
- c# - 在不同的单元格值之间插入行