React组件间状态传递：电影应用更新Hero海报的实现方案

核心是把需要共享的电影选中状态，从HeroSlider组件提升到它们的共同父组件Movies，再通过props把状态和更新方法分别传给HeroSlider和Slider，这样既能保证Slider的复用性，又能实现点击Slider更新Hero海报的需求。

修改后的代码实现 #

1. Movies 父组件（状态托管） #

import React, { useState } from 'react'
import HeroSlider from '../components/HeroSlider';
import Slider from '../components/Slider'

function Movies({movies, topMovies, TvShows}) {
    // 将选中电影的状态放到父组件，让子组件共享
    const [selectedMovie, setSelectedMovie] = useState(movies?.at(10) || null);

    return (
        <>
           {/* 把选中的电影传给HeroSlider用于展示 */}
           <HeroSlider selectedMovie={selectedMovie} />
           {/* 给Slider传递点击回调和自定义标题，适配不同分类 */}
           <Slider 
               items={movies} 
               title="Picked For You" 
               onMovieClick={setSelectedMovie} 
           />
           <Slider 
               items={topMovies} 
               title="Top Movies" 
               onMovieClick={setSelectedMovie} 
           />
        </>
    );
}
export default Movies

2. HeroSlider 组件（接收状态展示） #

移除组件内部的state，直接使用父组件传入的selectedMovie：

import React from 'react';
import FilterButton from './FilterButton';

function HeroSlider({selectedMovie}) {
    // 处理电影数据为空的边界情况
    if (!selectedMovie) return null;

    return (
        <>
            <div className="hero">
                <div className="bg-image">
                    <img 
                        src={`https://image.tmdb.org/t/p/w500${selectedMovie.backdrop_path}`} 
                        className="banner-img" 
                        alt={selectedMovie.original_title}
                    />
                </div>
                <div className="movie-details">
                    <h1>{selectedMovie.original_title}</h1>
                    <p>{selectedMovie.overview}</p> 
                    <button className='trailer-btn'>Watch Trailer</button>
                </div>
            </div>
        </>
    );
}
export default HeroSlider;

3. Slider 组件（接收回调触发更新） #

新增onMovieClick props，点击电影时调用这个回调函数，把当前电影数据传给父组件：

import React from 'react';

function Slider ({items, title, onMovieClick}) {
    // 处理无电影数据的情况
    if (!items?.length) return null;

    return (
        <>
            <h3 className='movie-genre'>{title}</h3>
            <div className="media-scroller snaps-inline">
                {items.map((movie, index) => (
                    <div className="media-element" key={index}>
                        <img 
                            src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`} 
                            alt={movie.original_title}
                            onClick={() => onMovieClick(movie)} 
                        />
                    </div>
                ))}
            </div>
        </>
    );
}
export default Slider;

额外优化点 #

• 给Slider增加了title props，不同分类的Slider可以显示不同标题，复用性更强
• 增加了边界情况处理（比如电影数据为空时返回null），避免页面报错
• 给图片添加了alt属性，提升可访问性

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