时间戳

首页 > 解决方案 > NextJS if 语句包装了一个 .map

reactjs - NextJS if 语句包装了一个 .map

问题描述

我想知道如何包装我的 if 语句以包含 .map 函数。

基本上，如果他们在视频中出现，我希望它说 Featured On：然后显示视频。

{
  data.directory.videos ? <h2>Featured On:</h2> : <></>;
}
{
  data.directory.videos.map((video, i) => {
    return (
      <Col lg="6">
        <Vyt id={video} height="200" />
      </Col>
    );
  });
}

标签： reactjsnext.js

解决方案

您应该能够将您的mapJSX 放入以以下内容为条件的真实性data.directory.videos：

{
  data.directory.videos && (
    <>
      <h2>Featured On:</h2>
      {data.directory.videos.map((video, i) => {
        return (
          <Col key={video} lg="6">
            <Vyt id={video} height="200" />
          </Col>
        );
      })}
    </>
  );
}

注意：我假设这里video可以用作key您的Col组件，但要进行相应的调整。

推荐阅读