使用三元运算符条件渲染JSX时出现Nothing was returned from render错误

核心错误原因 #

报错的直接原因是当selected为true时，组件的返回逻辑缺失return语句：
你当前的代码在selected分支里只是创建了CodeLinkShareLogPanel组件，但没有通过return将其作为组件输出返回，导致函数组件没有任何返回值，触发了Nothing was returned from render错误。

修复步骤 #

1. 补全selected分支的return语句 #

修改组件调用代码，确保两个分支都有明确的return：

if (selected) {
  // 补全return，返回CodeLinkShareLogPanel组件
  return (
    <CodeLinkShareLogPanel
      linkShareLogs={linkShareLogs}
      isBannerHidden={isBannerHidden}
      showSlackPrompt={showSlackPrompt}
      setShowSlackPrompt={setShowSlackPrompt}
    />
  );
} else {
  return (
    <div
      className="flex flex-col"
      style={{ height: `calc(100vh - ${offset}px)`, overflow: "auto" }}
    >
      {showSlackPrompt && <CodeLinkSlackPrompt setShowSlackPrompt={setShowSlackPrompt} />}
    </div>
  );
}

也可以简化为三元表达式写法，让逻辑更简洁：

return selected ? (
  <CodeLinkShareLogPanel
    linkShareLogs={linkShareLogs}
    isBannerHidden={isBannerHidden}
    showSlackPrompt={showSlackPrompt}
    setShowSlackPrompt={setShowSlackPrompt}
  />
) : (
  <div
    className="flex flex-col"
    style={{ height: `calc(100vh - ${offset}px)`, overflow: "auto" }}
  >
    {showSlackPrompt && <CodeLinkSlackPrompt setShowSlackPrompt={setShowSlackPrompt} />}
  </div>
);

2. 确认子组件props完整性 #

检查CodeLinkShareLogPanel组件的props解构，确保你用到的showSlackPrompt和setShowSlackPrompt被正确包含在props定义中：

export function CodeLinkShareLogPanel({
  linkShareLogs,
  showSlackPrompt, // 确认添加该props
  setShowSlackPrompt, // 确认添加该props
  [...] // 其他需要的props
}: props) {
  return (
    <div>
      {showSlackPrompt && <CodeLinkSlackPrompt setShowSlackPrompt={setShowSlackPrompt} />}
      {linkShareLogs ? (
        sortShareLogs(linkShareLogs).map((log: LinkShare, key) => (
          <div key={key} className="text-black">
           [...]
          </div>
        ))
      ) : ( 
        <div>
            This link hasn't been shared yet.
        </div>
      )}
    </div>
  );
}

3. 额外检查（可选） #

确认sortShareLogs函数能正常返回可遍历的数组，避免map操作时出现报错；同时确保linkShareLogs的类型符合预期（比如是数组或可判断真值的类型）。

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