ReactJS中如何将演员列表渲染为各自独立的跳转链接

问题原因 #

你当前的写法将所有演员姓名都包裹在同一个<Link>组件内，且在to属性中直接调用map方法，最终会生成拼接了所有演员姓名的错误路径，自然所有演员共享同一个跳转链接。

修改方案 #

直接遍历演员数组为每个演员单独生成跳转链接即可，修改后代码如下：

import React from 'react'; // 若项目已全局引入可省略
import { Link } from 'react-router-dom';

<div className="movie-actors">
  <span className="label">Actors: </span>
  <span className="value">
    {movie.Actors.map((actor, index) => (
      <React.Fragment key={actor.id || actor.Name}>
        <Link to={`/actors/${encodeURIComponent(actor.Name)}`}>
          {actor.Name}
        </Link>
        {/* 仅非最后一位演员后加分隔符 */}
        {index !== movie.Actors.length - 1 && ", "}
      </React.Fragment>
    ))}
  </span>
</div>
<button onClick={() => { onBackClick(null) }}>Back</button>
</div>

修改说明 #

• 每个演员对应独立的<Link>组件，跳转路径仅关联当前演员的姓名，实现点不同演员跳不同页面的需求
• 用React.Fragment包裹链接和分隔符，不会生成多余的DOM节点，排版效果和你原有写法完全一致
• 加了encodeURIComponent处理姓名中的空格、特殊字符，避免路由解析出错
• 补充了React循环渲染必填的key属性，如果你接口返回的演员数据有唯一的id字段，优先用actor.id作为key值，不要用索引当key
• 如果你的项目支持JSX简写语法，可以把<React.Fragment>替换为<>，代码更简洁

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