React useState使用：如何在三元运算符中嵌套另一个三元运算符？

问题修复方案 #

错误原因 #

你原来的写法存在两个核心问题：

• JSX 中{}用于包裹表达式，你在三元内部额外嵌套了多层{}，会被识别为对象字面量，不符合JSX语法规范
• 全局共用同一个open状态，会导致点击任意按钮时所有条目的内容同时展开/收起，不符合常规交互需求

修正后完整代码 #

import { useState } from "react";
import "./styles.css";

export default function App() {
  // 存储当前激活的条目名称，null表示无内容展开
  const [activeItem, setActiveItem] = useState(null);

  const itemsArray = [
    {
      name: "Item1",
      imageUrl: "https://picsum.photos/200/300" // 可替换为实际图片地址
    },
    {
      name: "Item2",
      videoUrl: "https://example.com/video-url" // 可替换为实际视频地址
    }
  ];

  // 渲染图片内容
  const renderImage = (url) => {
    return (
      <div onClick={() => setActiveItem(null)}>
        <img src={url} alt="cat" />
      </div>
    );
  };

  // 渲染视频内容
  const renderVideo = (url) => {
    return (
      <div className="window-on-top" onClick={() => setActiveItem(null)}>
        <iframe src={url} title="cat video" />
      </div>
    );
  };

  return (
    <div className="App">
      <h3>One button shows a cat photo and the other a cat video</h3>
      {itemsArray.map((item) => {
        return (
          <div key={item.name}>
            <button 
              className="niceBtn" 
              onClick={() => setActiveItem(activeItem === item.name ? null : item.name)}
            >
              {item.name}
            </button>
            {/* 正确的嵌套三元条件渲染写法 */}
            {activeItem === item.name ? (
              item.imageUrl ? renderImage(item.imageUrl) : renderVideo(item.videoUrl)
            ) : null}
          </div>
        );
      })}
    </div>
  );
}

关键调整说明 #

• 移除了条件渲染中多余的嵌套{}，JSX的{}内直接写表达式即可
• 将全局open状态替换为activeItem，实现点击对应按钮仅展开当前条目内容，避免互相干扰
• 嵌套三元逻辑清晰：当前条目处于激活状态时，优先判断是否存在图片地址，存在则渲染图片，否则渲染视频
• 保留了原交互逻辑：点击展开的内容区域可关闭当前显示

如果你确实需要全局统一开关所有内容的显示/隐藏，不需要区分激活条目，只需保留原open状态，将条件渲染部分改为以下写法即可：

{open ? (
  item.imageUrl ? ifImage(item.imageUrl) : ifVideo(item.videoUrl)
) : null}

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