在React组件中实现图片与文本的关联显示

const movies = [
  {
    id: 1,
    poster_path: "character/avatar/461.jpeg", // 图片路径的一部分
    alt: "Rick Sanchez", // 图片alt文本
    overview: "Rick Sanchez is the main protagonist of the Rick and Morty series." // 关联文本
  },
  {
    id: 2,
    poster_path: "character/avatar/662.jpeg",
    alt: "Morty Smith",
    overview: "Morty Smith is Rick's good-hearted but easily distressed grandson."
  }
];

const imageUrlBase = "https://rickandmortyapi.com/api/"; // 图片基础URL

import React from "react";

const ImageWithText = (props) => {
  const imageUrlBase = "https://rickandmortyapi.com/api/"; // 图片基础URL

  const movies = [
    {
      id: 1,
      poster_path: "character/avatar/461.jpeg",
      isSmall: true,
      alt: "Rick Sanchez",
      overview: "Rick Sanchez is the main protagonist of the Rick and Morty series."
    },
    {
      id: 2,
      poster_path: "character/avatar/662.jpeg",
      isSmall: true,
      alt: "Morty Smith",
      overview: "Morty Smith is Rick's good-hearted but easily distressed grandson."
    }
  ];

  // 模拟图片点击事件
  const handleMovie = (id) => console.log(`Movie ID clicked: ${id}`);

  return (
    <div className="row">
      <h2>{props.title}</h2> {/* 整个部分的标题 */}
      {movies.map((obj) => (
        // 每个图文组合的独立容器
        <div className="posters" key={obj.id}> {/* 添加key属性以优化列表渲染 */}
          <img
            alt={obj.alt} // 提供alt文本，提升可访问性
            onClick={() => handleMovie(obj.id)} // 图片点击事件
            className={props.isSmall ? "samllPoster" : "poster"} // 根据props应用不同样式
            src={`${imageUrlBase + obj.poster_path}`} // 构建完整的图片URL
          />
          {/* 图片的文本描述容器 */}
          <div className="poster-wraper">
            <h2>{obj.overview || "No description available"}</h2> {/* 显示文本，并提供备用文本 */}
          </div>
        </div>
      ))}
    </div>
  );
};

// App组件用于渲染ImageWithText
const App = () => {
  return <ImageWithText title="角色列表与描述" isSmall={true} />;
};

export default App;