反應元件容器

在構建 React 應用程式時，通常需要根據元件的主要職責將元件劃分為 Presentational 和 Container 元件。
表示元件僅涉及顯示資料 - 它們可以被視為並且通常被實現為將模型轉換為檢視的功能。通常，它們不保持任何內部狀態。容器元件與管理資料有關。這可以通過他們自己的狀態在內部完成，也可以作為 Redux 等狀態管理庫的中介。容器元件不會直接顯示資料，而是將資料傳遞給表示元件。

// Container component
import React, { Component } from 'react';
import Api from 'path/to/api';

class CommentsListContainer extends Component {
    constructor() {
        super();
        // Set initial state
        this.state = { comments: [] }
    }

    componentDidMount() {
        // Make API call and update state with returned comments
        Api.getComments().then(comments => this.setState({ comments }));
    }

    render() {
        // Pass our state comments to the presentational component
        return (
            <CommentsList comments={this.state.comments} />;
        );
    }
}

// Presentational Component
const CommentsList = ({ comments }) => (
    <div>
        {comments.map(comment => (
            <div>{comment}</div>
        )}
    </div>
);

CommentsList.propTypes = {
    comments: React.PropTypes.arrayOf(React.PropTypes.string)
}