Javascript 你能找出这个组件代码中的输入错误吗？

我在我的react应用程序（netflix克隆）中嵌入视频时遇到问题

我看到的不是嵌入式视频，而是屏幕上的黑色视频窗口和&

我相信问题出在下面的代码中：

  return (
    <div className="row">
      <h2>{title}</h2>
      <div className="row__posters">
        {movies.map((movie) => (
          <img
            key={movie.id}
            onClick={() => handleClick(movie)}
            className={`row__poster ${isLargeRow && "row_posterLarge"}`}
            src={`${base_url}${
              isLargeRow ? movie.poster_path : movie.backdrop_path
            }`}
            alt={movie.name}
          />
        ))}
      </div>
      {trailerUrl} && <YouTube videoId={trailerUrl} opts={opts} />
    </div>
  );
}

返回(
{title}
{movies.map（（movie）=>(
))}
{trailerUrl}&&
);
}

我已经附上了错误的屏幕盖：

…我试图从{trailerUrl}中删除右大括号，但这导致编译消息失败

想法

---

谢谢你查看这个

你的花括号放错地方了。我认为正确的语法是

{ trailerUrlb && <YouTube videoId={trailerUrl} opts={opts} />}

{trailerUrlb&&}

将大括号移到YouTube元素后面：

{trailerUrl&&}

put

{！！trailerUrl&&}

IDE将帮助您自己捕获这些内容。有很多免费的选择