反应组件容器

在构建 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)
}