React useState：如何将三元运算符放在三元运算符中？

Posted 2023-02-23

【中文标题】React useState：如何将三元运算符放在三元运算符中？

【英文标题】：React useState: How to put ternary operator within a ternary operator?

【发布时间】：2022-01-04 00:28:40

【问题描述】：

我正在映射一组项目。有些项目必须显示视频，而其他项目必须显示图像。我为每个显示器制作了 2 个函数，并使用 useState 来切换它们。

export default function App() 
  //SIMPLE USESTATE TO TOGGLE WINDOW
  const [open, setOpen] = useState(false);

  //THE ARRAY (1 contains an image and the other a video)
  const itemsArray = [
    
      name: "Item1",
      imageUrl: "some image url"
    ,
    
      name: "Item2",
      videoUrl: "some video url"
    
  ];

  //RENDER THIS IF ITEM IS IMAGE
  const ifImage = (i) => 
    return (
      <div onClick=() => setOpen(!open)>
        <img src=i  />
      </div>
    );
  ;

  //RENDER THIS IF ITEM IS VIDEO
  const ifVideo = (v) => 
    return (
      <div className="window-on-top" onClick=() => setOpen(!open)>
        <iframe>Some Video</iframe>
      </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=() => setOpen(!open)>
              item.name
            </button>

            /* NESTING CONDITIONALS OR SOMETHING TO MAKE THIS WORK */
            open ? 
          item.imageUrl ? ifImage(item.imageUrl): null
          ||
          item.videoUrl ? ifVideo(item.videoUrl): null
         : null
          </div>
        );
      )
    </div>
  );

我显然错了...需要一些帮助来了解如何解决这个问题... 这是一个沙盒，其中包含正确观看它的代码。 SANDBOX

【参考方案1】：

我会将条件放在子函数中，这样可以很容易理解发生了什么。

const tryImage = item => (
    !item.imageUrl ? null : (
        <div onClick=() => setOpen(!open)>
            <img src=item.imageUrl  />
        </div>
    ));
const tryVideo = item => (
    !item.videoUrl ? null : (
        <div onClick=() => setOpen(!open)>
            <img src=item.videoUrl  />
        </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=() => setOpen(!open)>
                        item.name
                    </button>
                    open && ([
                        tryImage(item),
                        tryVideo(item),
                    ])
                </div>
            );
        )
    </div>
);

不确定，但您可能还希望数组中的每个项目都有一个单独的 open 状态，而不是整个应用程序的单个状态。

【讨论】：

是的，完全正确... 似乎有效，但两个元素（图像和视频）现在同时显示。除了为每个项目创建单独的状态之外，还有其他方法可以打开单个项目吗？

如果您希望每个项目都可以单独打开和关闭，不。如果您一次只希望打开一个，请使用当前打开的状态的 index。