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盒子里的判断式如何写才正确？请在现有代码基础上展示说明，谢谢