React如何获取state对象数组值匹配对应对象更新状态渲染iframe？

修改方案 #

1. 补充点击事件处理逻辑 #

替换原有空的handleClick方法：

handleClick = (clickId) => {
  const newIds = this.state.ids.map(item => ({
    ...item,
    // 先把所有项的active置为false，匹配到点击id的项再设为true
    active: item.id === clickId
  }))
  this.setState({ ids: newIds })
}

2. 给遍历渲染的图片组件绑定点击事件 #

修改map遍历部分代码，新增key属性和onClick绑定：

{this.state.ids.map((i) => (
  <Image
    key={i.id}
    className="carouselitem"
    rounded
    fluid
    src={"http://img.youtube.com/vi/" + i.id + "/hqdefault.jpg"}
    size="small"
    onClick={() => this.handleClick(i.id)}
  />
))}

3. 新增激活状态的iframe渲染逻辑 #

在primaryvideo容器内，轮播组件上方加入iframe渲染代码：

<div className="primaryvideo">
  {/* 新增iframe渲染部分 start */}
  {this.state.ids.find(item => item.active) && (
    <iframe 
      width="100%" 
      height="400" 
      src={`https://www.youtube.com/embed/${this.state.ids.find(item => item.active).id}`}
      title="播放视频"
      frameBorder="0"
      allowFullScreen
    ></iframe>
  )}
  {/* 新增iframe渲染部分 end */}
  <div className="carousel">
    {/* 原有轮播代码 */}
  </div>
</div>

完整修改后代码 #

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { Button, Embed, Icon, Image, List } from "semantic-ui-react";
import "./Services.css";
import logo from "./images/EIB 3D Logo v25.png";
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import ReactPlayer from "react-player";
import MediaQuery from "react-responsive";

export default class Services extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ids: [
        {
          id: "iCBvfW08jlo",
          active: true,
        },
        {
          id: "qvOcCQXZVg0",
          active: false,
        },
        {
          id: "YXNC3GKmjgk",
          active: false,
        },
      ],
    };
  }
  handleClick = (clickId) => {
    const newIds = this.state.ids.map(item => ({
      ...item,
      active: item.id === clickId
    }))
    this.setState({ ids: newIds })
  };
  render() {
    const activeVideo = this.state.ids.find(item => item.active)
    return (
      <div className="serviceswrap">
        <div className="servicesbdrop">
          <div className="primarywrap">
            <div className="primaryvideo">
              {activeVideo && (
                <iframe 
                  width="100%" 
                  height="400" 
                  src={`https://www.youtube.com/embed/${activeVideo.id}`}
                  title="播放视频"
                  frameBorder="0"
                  allowFullScreen
                ></iframe>
              )}
              <div className="carousel">
                <div className="slider">
                  {this.state.ids.map((i) => (
                    <Image
                      key={i.id}
                      className="carouselitem"
                      rounded
                      fluid
                      src={
                        "http://img.youtube.com/vi/" + i.id + "/hqdefault.jpg"
                      }
                      size="small"
                      onClick={() => this.handleClick(i.id)}
                    />
                  ))}
                </div>
              </div>
            </div>
            <List size="big" className="servicesList">
              <List.Item>
                <List.Icon size="big" name="cog" />
                <List.Content>
                  <List.Header as="a">3D打印</List.Header>
                  <List.Description>
                    使用我们的3D打印机打印您的设计作品。
                  </List.Description>
                </List.Content>
              </List.Item>
              <List.Item>
                <List.Icon size="big" name="cog" />
                <List.Content>
                  <List.Header as="a">CNC加工</List.Header>
                  <List.Description>
                    使用我们的CNC设备加工您的设计作品。
                  </List.Description>
                </List.Content>
              </List.Item>
              <List.Item>
                <List.Icon size="big" name="cog" />
                <List.Content>
                  <List.Header as="a">个性化设计</List.Header>
                  <List.Description>
                    根据您的需求定制设计方案。
                  </List.Description>
                </List.Content>
              </List.Item>
              <List.Item>
                <List.Icon size="big" name="cog" />
                <List.Content>
                  <List.Header as="a">激光蚀刻</List.Header>
                  <List.Description>
                    在木材上蚀刻精美图案。
                  </List.Description>
                </List.Content>
              </List.Item>
              <List.Item>
                <List.Icon size="big" name="cog" />
                <List.Content>
                  <List.Header as="a">木工制作</List.Header>
                  <List.Description>
                    定制室内外木质标识牌。
                  </List.Description>
                </List.Content>
              </List.Item>
            </List>
          </div>
        </div>
      </div>
    );
  }
}

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