应用props参数实现影视网中热播电影和经典电影之间的切换。运行程序，在页面中会显示“热播”选项卡中的电影信息，结果如下图左图所示。当鼠标指向“经典”选项卡时，会显示该选项卡中的电影信息，结果如下图所示。

首先，在组件中定义两个状态变量 `activeTab` 和 `movies`，代码如下：

import React, { useState } from 'reactfunction MovieList(props) {
  const [active, setActiveTab] = useState('hot');
  const [movies, setMovies] = useState(props.hotMovies);

  return (
    <div>
      <div className="tabs">
        <span
          className={activeTab === 'hot' ? 'tab active' : 'tab'}
          onClick={() => {
            setActiveTab('hot');
            setMovies(props.hotMovies);
          }}
        >
          热播
        </span>
        <span
          className={activeTab === 'classic' ? 'tab active' : 'tab'}
          onClick={() => {
            setActiveTab('classic');
            setMovies(props.classicMovies);
          }}
        >
          经典
        </span>
      </div>
      <ul>
        {movies.map(movie => (
          <li key={movie.id}>
            <img src={movie.poster} alt={movie.name} />
            <h3>{movie.name}</h3>
            <p>{movie.description}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default MovieList;

在 `render()` 函数中，根据状态变量 `activeTab` 和 `movies` 来显示选项卡和电影信息。当鼠标指向经典选项卡时，会触发 `onClick` 事件，将状态变量 `activeTab` 设置为 'classic'，并将电影列表设置为 `props.classicMovies`。

render() {
  return (
    <div>
      <div className="tabs">
        <span
          className={this.state.activeTab === 'hot' ? 'tab active' : 'tab'}
          onClick={() => {
            this.setState({
              activeTab: 'hot',
              movies: this.props.hotMovies,
            });
          }}
        >
          热播
        </span>
        <span
          className={this.state.activeTab === 'classic' ? 'tab active' : 'tab'}
          onClick={() => {
            this.setState({
              activeTab: 'classic',
              movies: this.props.classicMovies,
            });
          }}
        >
          经典
        </span>
      </div>
      <ul>
        {this.state.movies.map(movie => (
          <li key={movie.id}>
            <img src={movie.poster} alt={movie.name} />
            <h3>{movie.name}</h3>
            <p>{movie.description}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}