如何点击JSON加载的问题Div，在ReactPlayer中加载对应视频？

你的问题核心是没用到React的状态管理来跟踪选中的视频URL，ReactPlayer没法自动响应地址变化，另外代码里还有几个小错误，我给你一步步修正：

关键修正点 #

1. 添加状态存储选中的视频URL
   用useState声明一个状态变量，专门保存用户点击的视频地址，这样React能感知到数据变化并更新组件。

2. 修改点击事件逻辑
   把原来仅打印URL的handleClick改成更新状态变量，让选中的URL能被ReactPlayer获取到。

3. 修正变量名错误
   你导入的是Questions，但代码里用了ListQuestions，这会直接导致报错，得统一成Questions。

4. 绑定ReactPlayer到状态变量
   把ReactPlayer的url属性绑定到状态变量，状态更新时播放器会自动加载新视频。

修正后的完整代码 #

import React, { useState } from "react";
import Questions from "../data/questions.json";
import style from "./Card.module.css";
import ReactPlayer from "react-player/youtube";

function Card() {
  // 声明状态存储选中的视频URL，初始为空
  const [selectedVideoUrl, setSelectedVideoUrl] = useState("");

  const handleClick = (url) => {
    // 更新状态，存入点击的视频URL
    setSelectedVideoUrl(url);
  };

  return (
    <div>
      <div className={style.ViewContent}>
        <div className={style.mainCard}>
          {/* 修正变量名：ListQuestions → Questions */}
          {Questions.map((ListItem, index) => {
            return (
              <div
                onClick={() => handleClick(ListItem.url)}
                key={index}
                className={style.Card}
              >
                <h3 className={style.Titel}>{ListItem.question}</h3>
              </div>
            );
          })}
        </div>

        <div className={style.VideoPlayer}>
          {/* 将播放器的URL绑定到状态变量 */}
          <ReactPlayer url={selectedVideoUrl} controls={true} />
        </div>
      </div>
    </div>
  );
}
export default Card;

额外提示 #

• 如果想默认播放某个视频，把useState("")里的空字符串改成对应的视频URL即可。
• 代码里用数组索引作为key虽然能用，但如果你的JSON数据里有唯一ID（比如ListItem.id），最好用这个ID作为key，组件性能和稳定性会更好。

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