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

【问题标题】：Conditional rendering and onClick event using ternary operator使用三元运算符的条件渲染和 onClick 事件
【发布时间】：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} alt="home" />
                            <p>Home</p>
                        </span> :
                        <span>
                            <img src={HomeIcon} alt="home" />
                            <p>Home</p>
                        </span>
                }
            </div>
   )
}

export default Menubar

【问题讨论】：

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

标签： reactjs events onclick conditional-operator conditional-rendering

【解决方案1】：

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

【讨论】：

感谢它成功了，我不敢相信我犯了这么愚蠢的错误
是的，玩得开心
再次感谢，我们同名

【解决方案2】：

尝试更改 onClick 来自

onClick={alert('hey')}

到

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

【讨论】：