Reactjs 使用三元运算符的条件渲染和onClick事件

我试图显示一个有条件呈现的元素的警报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

从“React”导入React；
从“../Images/home.svg”导入HomeIcon
从“../Images/home blue.svg”导入HomeIconBlue；
功能菜单栏（道具）{
常量样式={
borderTop：“3px实心#2D79BB”，
颜色：“2D79BB”，
}
返回(
{
（props.active==='home'）？
家

:
家

}
)
}
导出默认菜单栏

尝试将onClick从

onClick={alert('hey')}

到

---

尝试从更改onClick

onClick={alert('hey')}

到

---

保留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>
   )

返回(
{
（props.active==='home'）？
家

:
家

}
)

保留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>
   )

返回(
{
（props.active==='home'）？
家

:
家

}
)

onClick={e=>alert（'hey'）}onClick={e=>alert（'hey'）}谢谢它成功了，我不敢相信我犯了这么愚蠢的错误是的，发生了，开心了谢谢，我们又同名了谢谢它成功了，我不敢相信我犯了这么愚蠢的错误是的，开心了谢谢，我们同名