[英]How to based in a condition apply or not a property into a jsx element
我有这个元素:
<div id="app-wrapper" style={{"grid-template-columns": "50% 50%"}}>..</div>
我想根据组件状态中定义的条件将样式属性更改为:
<div id="app-wrapper" style={{"grid-template-columns": "100%"}}>..</div>
您可以通过两种方式使用三元运算符有条件地呈现样式:
选项1:
<div id="app-wrapper" style={state? {"grid-template-columns": "50% 50%"} : {"grid-template-columns": "100%"}}>..</div>
选项 2(更清洁):
const divStyle = state? {"grid-template-columns": "50% 50%"} : {"grid-template-columns": "100%"}
<div id="app-wrapper" style={divStyle}>..</div>
您喜欢使用三元运算符:
<div id="app-wrapper" style={{"grid-template-columns": condition?"100%":"50% 50%"}}>..</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.