使用三元运算符的条件渲染和 onClick 事件
Posted
技术标签:
【中文标题】使用三元运算符的条件渲染和 onClick 事件【英文标题】:Conditional rendering and onClick event using ternary operator 【发布时间】:2021-06-30 08:39:39 【问题描述】:我正在尝试显示有条件渲染的元素的警报 onclick,但 onclick 事件不起作用我从三元运算符中取出代码并且它起作用了,但我似乎找不到它的原因在三元运算符中不起作用。
import React from 'react';
import HomeIcon from '../Images/home.svg'
import HomeIconBlue from '../Images/home-blue.svg';
function Menubar(props)
const style =
borderTop: "3px solid #2D79BB",
color: "#2D79BB",
return (
<div className="menu-bar">
<div className="home-icon">
(props.active === 'home') ?
<span style=style onClick=alert('hey')>
<img src=HomeIconBlue />
<p>Home</p>
</span> :
<span>
<img src=HomeIcon />
<p>Home</p>
</span>
</div>
)
export default Menubar
【问题讨论】:
onClick=e => alert('hey') 【参考方案1】:您保留 onClick 事件的元素尚未呈现,请将其保留在第二个元素上。 当前正在渲染的那个
return (
<div className="menu-bar">
<div className="home-icon">
(props.active === 'home') ?
<span style=style >
<img src=HomeIconBlue />
<p>Home</p>
</span> :
<span onClick=alert('hey')>
<img src=HomeIcon />
<p>Home</p>
</span>
</div>
)
【讨论】:
感谢它成功了,我不敢相信我犯了这么愚蠢的错误 是的,玩得开心 再次感谢,我们同名【参考方案2】:尝试更改 onClick 来自
onClick=alert('hey')
到
onClick=() => alert('hey')
【讨论】:
以上是关于使用三元运算符的条件渲染和 onClick 事件的主要内容,如果未能解决你的问题,请参考以下文章