三元运算符第三个条件满足时无法渲染问题求助

问题原因 #

你的代码逻辑存在结构错误：未认证状态的渲染分支被嵌套在authStatus === "authenticated"的判断里。当authStatus !== "authenticated"时，外层的authStatus === "authenticated" && (...)直接返回false，整个内部的三元运算符都不会执行，导致BlurredScreen部分永远无法触发渲染。

修复方案 #

把认证状态的判断提到外层，拆分认证与未认证的逻辑分支：

return (
  <>
    <div key={"key-" + id}>
      {isOpen && (
        <div>
          {authStatus === "authenticated" ? (
            header.x && header.x.t === "abc" ? (
              <div onClick={(e) => e.stopPropagation()}>
                <ComponentOne />
              </div>
            ) : header.x && header.x.t === "def" ? (
              <div onClick={(e) => e.stopPropagation()}>
                <ComponentTwo />
              </div>
            ) : null
          ) : (
            !header.x && (
              <div>
                <img src={blurredScreen} />
                <button onClick={handleSignInClick}>
                  <span style={{ textAlign: "left" }}>Login </span>
                </button>
              </div>
            )
          )}
        </div>
      )}
    </div>
  </>
);

代码优化建议 #

嵌套三元运算符可读性较差，可拆分为自执行函数或单独变量，降低维护成本：

return (
  <>
    <div key={"key-" + id}>
      {isOpen && (
        <div>
          {(() => {
            if (authStatus === "authenticated") {
              if (header.x?.t === "abc") {
                return (
                  <div onClick={(e) => e.stopPropagation()}>
                    <ComponentOne />
                  </div>
                );
              } else if (header.x?.t === "def") {
                return (
                  <div onClick={(e) => e.stopPropagation()}>
                    <ComponentTwo />
                  </div>
                );
              }
              return null;
            } else {
              return !header.x ? (
                <div>
                  <img src={blurredScreen} />
                  <button onClick={handleSignInClick}>
                    <span style={{ textAlign: "left" }}>Login </span>
                  </button>
                </div>
              ) : null;
            }
          })()}
        </div>
      )}
    </div>
  </>
);

内容的提问来源于stack exchange，提问作者deadant88