使用三元运算符的条件渲染和 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 事件的主要内容,如果未能解决你的问题,请参考以下文章

反应渲染逻辑 && vs 三元运算符

微信小程序结构目录配置介绍视图层(数据绑定,运算,列表渲染,条件渲染)

13 三元运算

React官方文档学习记录- 条件渲染

三元运算

三元运算