React 18模板中return语句失效无法渲染元素的原因是什么？

核心原因 #

你在JSX的{}里直接写了return语句，这是错误的——JSX中{}只能放表达式（能返回值的代码），不能放完整的语句（比如return、if这类）。所以浏览器会把return trailers.slice...当成普通字符串直接渲染，而不是执行这段逻辑生成<li>元素。

需要修正的几个点 #

1. 移除多余的return #

在<ol>和<div className="carousel-inner">内部，直接写map表达式即可，不用加return：

// 错误写法
return trailers.slice(0, maxCarouselItems).map(...)

// 正确写法
trailers.slice(0, maxCarouselItems).map(...)

2. 修正JSX属性的语法错误 #

• key="video.id"：这会把key设为字符串"video.id"，应该用{video.id}绑定变量，保证每个元素key唯一
• data-bs-slide-to="${index}"：模板字符串要放在{}里，直接写data-bs-slide-to={index}就行（React会自动把数字转成字符串）
• className="{ active: index === 0 }"：这会把类名设为字符串"{ active: index === 0 }"，应该用三元表达式动态生成类名：className={index === 0 ? "active" : ""}
• activeclassname：没有这个属性，应该合并到className里，写成className={carousel-item ${index === 0 ? "active" : ""}}
• maxCarouselItems未定义：要先声明这个变量，比如const maxCarouselItems = 5;

修正后的完整Trailercarousel.jsx代码 #

import './Trailercarousel.css';

function Trailercarousel({ trailers }) {
  const maxCarouselItems = 5; // 定义最大轮播项数量
  return (
    <div id="trailersCarousel" className="carousel slide" data-bs-interval="false">
      {trailers.length > 1 ?
        <>
          <ol className="carousel-indicators">
            {trailers.slice(0, maxCarouselItems).map((video, index) => (
              <li
                key={video.id}
                data-bs-target="#trailersCarousel"
                data-bs-slide-to={index}
                className={index === 0 ? "active" : ""}
              >
                {index + 1}
              </li>
            ))}
          </ol>
        </> : <>
      </>
      }

      <div className="carousel-inner">
        {trailers.slice(0, 5).map((video, index) => (
          <div
            key={video.id}
            className={`carousel-item ${index === 0 ? "active" : ""}`}
          >
            <iframe
              className="embed-responsive-item"
              src={`https://www.youtube.com/embed/${video.key}`}
              title={video.name} // 增加title属性，提升可访问性
            ></iframe>
          </div>
        ))}
      </div>
    </div>
  );
}

export default Trailercarousel;

内容的提问来源于stack exchange，提问作者Razvan Zamfir