Question

在创建卡片滑块（卡片传送带）时，我有一个要求。我已将组件拆分为Slider和Card。然后我有一个容器“ App”。卡的数据来自redux。还可以选择刷新每张卡。现在，我已经在“ App”容器中获取数据，更新数据操作。在App容器中，我执行以下操作。

调用获取数据操作。
获取数据作为道具。
通过地图进行映射，并将必要的信息传递到卡片中。
将这些卡片作为孩子传递给。
刷新卡后，我将其称为“更新数据”操作。

那么有没有必要将它们分开？还是目前的结构很好？

import React, { Component } from "react";
import { connect } from "react-redux";

import Slider from "../../Components/Slider";
import Card from "../../Components/Card";
import * as actions from "../../Store/Actions/app";


class App extends Component {
  componentDidMount() {
    this.props.onInitApp(data);
  }


  cardRefreshHandler = (e, countryName, countryId) => {
    this.props.onLoading();
    this.props.onCardRefresh(country, countryId);
  };

  render() {
    let cards = "";
    if (this.props.data && this.props.data.length > 0) {
      cards = this.props.data.map((item, index) => {
        return (
          <Card
            key={index}
            id={index}
            data={item}
            onRefresh={this.cardRefreshHandler}
          />
        );
      });
    }

    return (
      <div class="app-container">
        <Slider>
          {cards}
        </Slider>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    data: state.data,
    loading: state.loading
  };
};

const mapDispatchToProps = dispatch => {
  return {
    onInitApp: country => dispatch(actions.fetchData(country)),
    onLoading: () => dispatch(actions.loadRefreshScreen()),
    onCardRefresh: (country, countryId) => dispatch(actions.refreshData(country, countryId))
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

Answer 1

本文可能有助于理解容器和组件之间更好的结构差异：https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

您会发现您的组件更易于重用，并考虑将它们分为两类。我称它们为“容器”和“演示组件” *，但我也听到过“胖瘦”，“聪明笨拙”，“状态纯净”，“屏幕和组件”等。这些都不完全相同，但是核心思想是相似的。

如何分离组件和容器？

1 个答案: