react,return里的判断式如何写才正确?

代码如下:

const News = () => {
return (
<div>
            <span className={styles.a}>
              {hourTgdz[0] == '1' ? '东' : null}
              {hourTgdz[0] == '2' ? '南' : null}
              {hourTgdz[0] == '3' ? '西' : null}
              {hourTgdz[0] == '4' ? '北' : null}
            </span>
            <span className={styles.b}>
              {rgz[0] == '1' ? '东' : null}
              {rgz[0] == '2' ? '南' : null}
              {rgz[0] == '3' ? '西' : null}
              {rgz[0] == '4' ? '北' : null}
            </span>
            <span className={styles.c}>
              {ygz[0] == '1' ? '东' : null}
              {ygz[0] == '2' ? '南' : null}
              {ygz[0] == '3' ? '西' : null}
              {ygz[0] == '4' ? '北' : null}
            </span>
            <span className={styles.d}>
              {ngz[0] == '1' ? '东' : null}
              {ngz[0] == '2' ? '南' : null}
              {ngz[0] == '3' ? '西' : null}
              {ngz[0] == '4' ? '北' : null}
            </span>
          </div>
          <div>
            <span className={styles.all}>
              // 如果rgz[0]的值与hourTgdz[0]的值一样(即都为‘东’或都为‘南’等),则这个span盒子里显示‘方向’二字
              {rgz[0] == hourTgdz[0] ? '方向' : null}
              // 如果类名为b的span盒子里的值为‘东’,类名为c的span盒子里的值为‘南’,则这个span盒子里显示‘文’二字
              // 如果类名为b的span盒子里的值为‘西’,类名为d的span盒子里的值为‘北’,则这个span盒子里显示‘武’二字
              // 按以上两个判断条件,请问以下两判断式的正确写法是什么?
              // {rgz[0].value=='东'  ygz[0].value=='南' ? '文' : null}
              // {rgz[0].value=='西' ngz[0].value=='北' ? '武' : null}
            </span>
          </div>
)
}

请问最后一个span盒子里的判断式如何写才正确?请在现有代码基础上展示说明,谢谢

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 文章:react span设置行内样式自动换行 中也许有你想要的答案,请看下吧
  • 以下回答来自chatgpt:

    对于这个问题,你可以使用JavaScript中的三元运算符和逻辑操作符来进行判断。以下是一个示例代码:

    return (
      <div>
        <span>{this.state.show ? '显示' : '隐藏'}</span>
        {this.state.condition === 'a' ? <span>条件a</span> :
        this.state.condition === 'b' ? <span>条件b</span> :
        this.state.condition === 'c' && this.state.condition2 === 'd' ? <span>条件c和条件d同时成立</span> :
        <span>其他条件</span>}
      </div>
    );
    

    在这个示例中,使用了逻辑操作符&&来实现多条件判断。当this.state.condition等于"c"并且this.state.condition2等于"d"时,会渲染出"条件c和条件d同时成立"这个span标签,否则会渲染出"其他条件"这个span标签。你也可以用||运算符来实现多个条件中只要满足一个就渲染相应的标签。

    希望这个示例能够帮助你解决问题!


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^