代码之家 › 专栏 › 技术社区 › Razvan Zamfir

React 18模板中此返回语句失败的原因是什么?

rxjs reactjs javascript

Razvan Zamfir · 技术社区 · 1 年前

我一直在和 React 18 和 电影数据库(TMDB)API 。

我有一个要显示的组件 电影预告片 ,我在电影详细信息页面上使用,如下所示:

{trailers.length ?
  <>
    <div className="mb-3">
      <h2 className="section-title">Trailers</h2>
      <TrailerCarousel trailers={trailers} />
    </div>
  </> : <></>
}

在Trailercarouse.jsx文件中,我有:

import './Trailercarousel.css';

function Trailercarousel({ trailers }) {
  return (
    <div id="trailersCarousel" className="carousel slide" data-bs-interval="false">
      {trailers.length > 1 ?
        <>
          <ol className="carousel-indicators">
            return trailers.slice(0, maxCarouselItems).map((video, index) => (
              <li
                key="video.id"
                data-bs-target="#trailersCarousel"
                data-bs-slide-to="`${index}`"
                className="{ active: index === 0 }"
              >
                {index + 1}
              </li>
            ));
          </ol>
        </> : <></>
      }

      <div className="carousel-inner">
        return trailers.slice(0, 5).map((video, index) => (
          <div
            key="video.id"
            className="carousel-item"
            activeclassname="{ active: index === 0 }"
          >
            <iframe
              className="embed-responsive-item"
              src="`https://www.youtube.com/embed/${video.key}`"
            ></iframe>
          </div>
        ));
      </div>
    </div>
  );
}

export default Trailercarousel;

问题

下面的表达式不返回 <li> 元素:

return trailers.slice(0, maxCarouselItems).map((video, index) => (
  <li
    key="video.id"
    data-bs-target="#trailersCarousel"
    data-bs-slide-to="`${index}`"
    className="{ active: index === 0 }"
  >
    {index + 1}
  </li>
));

相反 return trailers.slice(0, maxCarouselItems).map((video, index) => (...)); 显示为 如果是字符串 。

为什么return语句在这种情况下失败?

1 回复 | 直到 1 年前

Razvan Zamfir 1 年前

用一层额外的背带把它包起来。就JSX而言,你已经明白了 return trailers.slice... 作为纯文本。和 return 这里没有任何作用,因为您已经在返回(整个JSX)中了。

<div className="carousel-inner">
  {trailers.slice(0, 5).map((video, index) => (
    <div
      key="video.id"
      className="carousel-item"
      activeclassname="{ active: index === 0 }"
    >
      <iframe
        className="embed-responsive-item"
        src="`https://www.youtube.com/embed/${video.key}`"
      ></iframe>
    </div>
  ))};
</div>

如果你把它用大括号括起来,并包含一个返回,它会给你一个错误。从概念上讲,它将与以下内容相同:

const Foo = () => {
  return (
    foo(
      return bar
    )
  )
}