使用三元运算符的条件呈现和onClick事件

Question

我试图对有条件呈现的元素显示一个警告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} alt="home" />
<p>Home</p>
</span> :
<span>
<img src={HomeIcon} alt="home" />
<p>Home</p>
</span>
}
</div>
)
}
export default Menubar

Answer 1

尝试从更改onClick

onClick={alert('hey')}

至

onClick={() => alert('hey')}

Answer 2

保存onClick事件的元素尚未呈现，请将其保留在第二个元素上。当前正在呈现的

return (
<div className="menu-bar">
<div className="home-icon">
{
(props.active === 'home') ?
<span style={style} >
<img src={HomeIconBlue} alt="home" />
<p>Home</p>
</span> :
<span onClick={alert('hey')}>
<img src={HomeIcon} alt="home" />
<p>Home</p>
</span>
}
</div>
)