React组件真值校验引发不可达代码错误，求修复方案

你遇到的不可达代码错误，核心原因是三元运算符的语法使用错误，以及整体的JSX结构逻辑混乱。

看你当前的return语句：

return (
  checkCommentAuthor() ? (
    <IsCommentAuthor/>
  ) : (
    <IsNotCommentAuthor/>
  ) : 此后所有代码均不可达
  (
    // 下面的card代码...
  )
)

三元运算符的语法是 条件 ? 真值表达式 : 假值表达式，你这里多写了一个: ，直接破坏了语法结构——JavaScript会把第一个: 后面的<IsNotCommentAuthor/>当作假值分支，后面的: 此后所有代码均不可达完全是无效语法，导致后面的card代码块根本不会被解析，自然变成了不可达代码。

另外从代码意图来看，你应该是想先根据是否为评论作者渲染对应的组件，然后再渲染共同的帖子卡片内容，对吧？

我们需要修正三元运算符的语法，同时把条件渲染的组件和共同的card内容整合到同一个JSX结构中（用React.Fragment或者普通div包裹都可以）：

return (
  <>
    {/* 先根据条件渲染对应的作者/非作者组件 */}
    {checkCommentAuthor() ? <IsCommentAuthor /> : <IsNotCommentAuthor />}
    
    {/* 这里是所有情况都需要渲染的卡片内容 */}
    <div id="card" className="card">
      <div id="postButtons" className="buttons">
        <button onClick={() => history.push("/homepage")}>Home</button>
        <button onClick={() => history.push("/profile")}>My Profile</button>
        <button onClick={() => LogOut()}>Log Out</button>
      </div>
      <div className="posts">
        <p> Author : {grabUsernameFromLocation()} </p>
        <p> Title : {grabTitleFromLocation()} </p>
        <p> Description : {grabDescriptionFromLocation()} </p>
        <div>
          <ul>
            {comments.map((items: any) => {
              return (
                <p key={uuidv4()} >Comment : {items.comment} </p>
              );
            })}
          </ul>
        </div>
        <div className="comments">
          <input ref={commentRef} placeholder={'Write Comment'}/>
          <button onClick={() => { addComment(grabIdFromLocation()) }}>Add Comment </button>
        </div>
      </div>
    </div>
  </>
)

关键修正点： #

1. 去掉了多余的: 此后所有代码均不可达，让三元运算符回到正确的条件 ? 真 : 假结构。
2. 用React.Fragment（<>和</>）把条件渲染组件和card内容包裹起来，确保return的是单个JSX元素（React要求组件的return必须是单个根元素）。
3. 把条件渲染的部分用{}包裹，嵌入到JSX结构中，这样无论条件真假，都会先渲染对应的组件，再渲染下面的card内容。

如果你原本的意图是条件渲染其中一个组件，替换掉card内容（而不是同时显示），那只需要把card内容放到三元的真/假分支里即可，不过这种写法有重复代码，更优的方式是把共同的card内容抽成一个单独的组件，比如PostCard，然后在条件分支里复用：

const PostCard = () => (
  <div id="card" className="card">
    {/* 卡片内容... */}
  </div>
);

// 然后在return里：
return (
  <>
    {checkCommentAuthor() ? <IsCommentAuthor /> : <IsNotCommentAuthor />}
    <PostCard />
  </>
)

这样代码更简洁，也更容易维护。

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