gpt4 book ai didi

javascript - 如何应用我的 React 样式与三元运算符内联?

转载 作者:太空宇宙 更新时间:2023-11-04 08:15:33 24 4
gpt4 key购买 nike

我目前正在尝试为我的响应式网站添加侧边导航栏滑入和滑出功能。我正在关注第一个动画示例 here .

我首先使用 document.getElementById("mySidenav").style.width = "250px"; 让它工作。但是,我不希望使用 document 操作 DOM。我想使用本地状态并更新它。我正在使用 JavaScript 内联样式。以下是一些代码的工作原理:

openNavbar = () => {
document.getElementById("mySidenav").style.width = "0";
};

<div style={styles.navbarMobile} onClick={this.openNavbar}>
<NavSidebar/>
</div>

navbarMobile: {
height: '100vh',
width: '100%',
position: 'fixed',
zIndex: 11,
top: '0',
left: '-100%',
overflowX: 'hidden',
overflowY: 'hidden',
transition: '1s',
paddingRight: '15px',
display: 'none',

'@media (max-width: 992px)': {
display: 'block',
backgroundColor: 'white'
}
}

很明显,我做的与示例中的有所不同。我不是在操纵宽度,而是在操纵左侧位置。它运行顺利。但是,我现在正在尝试实现一些本地状态并根据本地状态值更改 CSS。这是我所拥有的:

this.state = {
navOpen: false
}

openNavbar = () => {
this.setState({navOpen: true});
};

<div style={this.state.navOpen ? {left: 0} : {left: -100%}, styles.navbarMobile} onClick={this.openNavbar}>
<NavSidebar/>
</div>

navbarMobile: {
height: '100vh',
width: '100%',
position: 'fixed',
zIndex: 11,
top: '0',
left: '-100%',
overflowX: 'hidden',
overflowY: 'hidden',
transition: '1s',
paddingRight: '15px',
display: 'none',

'@media (max-width: 992px)': {
display: 'block',
backgroundColor: 'white'
}
}

主要关注如何在传递三元组的同时添加其他内联样式。通过执行上述操作,navbarMobile 中的所有 css 都得到应用。但是,三元组永远不会运行。如果我删除 styles.navbarMobile 然后三元组工作。有什么办法可以同时运行这两个吗?关于我应该如何处理这个的任何例子或想法?

最佳答案

问题是你设置了你的 style 属性错误。因为你有一个逗号,它充当 comma operator ,所以本质上,无论三元被评估为什么,它都会被忽略,navbarMobile 样式总是被应用。三元运算符正在计算,只是逗号运算符总是计算最右边的操作数。相反,使用像这样的扩展语法:

<div style={{
...style.navbarMobile,
left: this.state.navOpen ? 0 : '-100%'
}}>

这将获取 navbarMobile 中的样式并复制它们,然后根据 navOpen 确定 left。阅读有关 JSX 中传播语法的更多信息 here .

关于javascript - 如何应用我的 React 样式与三元运算符内联?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45930093/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com