从一组视频ID中播放YouTube视频: React

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const VideoPlayer = ({ videoId }) => {
  const [embedCode, setEmbedCode] = useState('');

  useEffect(() => {
    const fetchEmbedCode = async () => {
      const response = await axios.get(`https://www.googleapis.com/youtube/v3/videos?id=${videoId}&key=YOUR_API_KEY&part=player`);
      const embedCode = response.data.items[0].player.embedHtml;
      setEmbedCode(embedCode);
    };

    fetchEmbedCode();
  }, [videoId]);

  return (
    <div dangerouslySetInnerHTML={{ __html: embedCode }} />
  );
};

const App = () => {
  const videoIds = ['VIDEO_ID_1', 'VIDEO_ID_2', 'VIDEO_ID_3'];

  return (
    <div>
      {videoIds.map((videoId) => (
        <VideoPlayer key={videoId} videoId={videoId} />
      ))}
    </div>
  );
};

export default App;