React电影克隆App中为渲染的Genre元素添加点击事件的方法

问题 #

我正在制作电影App克隆项目，现有genres函数可将API返回的genre_ids映射为流派名称数组，通过join拼接后以span标签渲染。现需为每个流派元素添加onclick事件，以识别点击的流派值，或存储该值并作为参数发起新API请求。

现有代码如下：

function genres(genre_ids) {
    const newArr = genre_ids.map(myFunction);
    function myFunction(num) {
      switch (num) {
        case 12:
          return "Adventure";
          break;
        case 28:
          return "Action";
          break;
        case 16:
          return "Animation";
          break;
        case 35:
          return "Comedy";
          break;
      }
      return newArr.join("/");
}

渲染代码：

<Card.Text>
    <div>
        <span style={{ fontSize: "15px" }}>{genres(genre_ids)}</span>
    </div>
</Card.Text>

请问如何为每个渲染的流派元素添加onclick事件？

解决方案 #

当前genres函数返回的是拼接后的字符串，没法给单个流派绑定点击事件。要实现需求，需要让函数返回带点击事件的单个JSX元素数组，而非拼接字符串。

1. 修改genres函数 #

重构函数，返回每个流派对应的带onClick的<span>元素，同时用映射表替代switch提升可维护性：

function genres(genreIds, onGenreClick) {
  // 流派ID与名称映射表，新增流派直接添加键值对即可
  const genreMap = {
    12: "Adventure",
    28: "Action",
    16: "Animation",
    35: "Comedy"
  };

  // 遍历ID数组，生成带点击事件的JSX元素
  return genreIds.map(genreId => {
    const genreName = genreMap[genreId];
    if (!genreName) return null; // 过滤未知流派ID

    return (
      <span
        key={genreId}
        style={{ fontSize: "15px", margin: "0 4px", cursor: "pointer" }}
        onClick={() => onGenreClick(genreId, genreName)}
      >
        {genreName}
        {/* 给非最后一个元素添加分隔符 */}
        {genreIds.indexOf(genreId) !== genreIds.length - 1 && "/"}
      </span>
    );
  });
}

2. 修改渲染逻辑 #

在组件内定义点击事件处理函数，传入genres函数完成渲染：

// 组件内定义点击处理逻辑
const handleGenreClick = (genreId, genreName) => {
  // 这里可执行业务操作：存储流派值、发起API请求等
  console.log(`点击流派：${genreName}，ID：${genreId}`);
  // 示例：发起流派筛选的API请求
  // fetch(`https://your-api-url/movies?genre=${genreId}`)
  //   .then(res => res.json())
  //   .then(data => console.log(data));
};

// 渲染部分
<Card.Text>
  <div>
    {genres(genre_ids, handleGenreClick)}
  </div>
</Card.Text>

关键说明 #

• 用对象映射替代switch，后续新增流派只需修改映射表，更易维护。
• 每个<span>添加key属性，符合React列表渲染的规范。
• 点击回调直接传入流派ID和名称，方便后续业务逻辑处理。
• 手动处理分隔符，避免拼接字符串导致的无法绑定事件问题。

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