React 渲染电影 - Javascript

在这篇文章中，我们将介绍如何使用 React 渲染电影，并且展示如何将它们呈现在页面上。我们将使用一个名为 react-movie 的模块来简化这个过程，并且将会用到一些常用的 React 技术来实现。在开始之前，请确保你已经熟悉 React 的基础知识，并且已经安装好了 React 和 react-movie。

添加电影组件

首先，让我们创建一个组件来展示我们的电影信息。我们可以将其命名为 Movie 组件。它应该包含以下信息：

• 电影海报
• 电影名称
• 导演姓名
• 电影评分

在 React 中，可以使用 props 来在组件之间传递数据。我们将使用 props 来传递我们的电影信息。在代码中，我们使用 props 来获取所有必需的电影数据。在组件中包含一个 <div> 元素，我们将在其中嵌入获取到的数据。

import React from 'react';

const Movie = ({ poster, title, director, rating }) => (
    <div>
        <img src={poster} alt={title} />
        <h1>{title}</h1>
        <h2>{director}</h2>
        <h3>{rating}</h3>
    </div>
);

export default Movie;

在这个组件中，我们将获取到的 poster、title、director 和 rating 字段全部渲染到 <div> 中。这样，我们就可以渲染出一个电影信息的纯粹组件了。

添加电影列表

接下来，让我们创建一个组件来循环展示电影列表。我们可以将其命名为 MovieList 组件。

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

const MovieList = ({ movies }) => (
    <div>
        {movies.map(movie => <Movie key={movie.id} {...movie} />)}
    </div>
);

export default MovieList;

在这个组件中，我们将传入一个 movies 的数组对象，并使用 map 来循环遍历每一个电影对象，并渲染成 <Movie> 组件。我们将每个电影对象的 ID 作为 key 属性，来确保 React 可以跟踪组件的更新。组件 MovieList 对象也可以像 Movie 组件一样，直接被其他组件嵌入使用。

获取电影数据

我们已经有了能够渲染电影信息的单一组件，接下来我们需要的是获取电影数据。在这个例子中我们将使用 axios 来获取我们的电影数据。首先，我们需要先安装 axios：

npm install --save axios

接下来，创建一个数据获取函数，并在 componentDidMount() 中调用该函数。我们将使用 state 来存储我们的数据，并在获取数据成功的回调函数中更新 state。

import React, { Component } from 'react';
import axios from 'axios';
import MovieList from './MovieList';

class App extends Component {
    state = {
        movies: []
    };

    componentDidMount() {
        axios.get('https://api.example.com/movies')
            .then(response => {
                this.setState({
                    movies: response.data
                });
            });
    }

    render() {
        return (
            <div>
                <MovieList movies={this.state.movies} />
            </div>
        );
    }
}

export default App;

在这个组件中，我们使用 axios.get() 来请求电影数据。我们将数据保存在 this.state 的 movies 字段中，并传递给 MovieList 组件来渲染。在状态更新后，React 会自动重新渲染我们的应用程序，用我们的电影列表更新页面。

结论

这篇文章介绍了使用 React 渲染电影的完整过程，并且展示了如何使用通用技术来实现这个过程。我们使用了 props 来传递数据、使用 state 来更新渲染状态，并将所有的代码组合在一起以创建完整的应用程序。我们使用了 axios 来获取数据，并且使用了 <Movie> 和 <MovieList> 组件来渲染我们的电影数据。这个过程是通用的，可以用于各种应用程序。