Question

我意识到这是一个之前可能已经回答过的基本问题，但是我正在寻找一种可能有一定道理的明确答案，因为我还没有找到一个能说服我自己有更好/最好/首选的处理方式。

方案：：仪表板组件通过连接接收Redux状态。一些数据在仪表板及其子级之间共享。一些数据特定于仪表板的子级。

问题：我应该总是将道具传给下面的子组件（某物），还是应该总是将它们传给其他人？子组件到redux并直接从redux状态读取所需的数据？

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

class DashboardExample extends Component {
  render() {
    const { sharedData, childOneData, childTwoData } = this.props
    return (
      <div>
        <h1>{sharedData.selectedDate}</h1>
        <ChildOne sharedData={sharedData} childOneData={childOneData} />
        <ChildTwo sharedData={sharedData} childTwoData={childTwoData} />
      </div>
    );
  }
}

const mapStateToProps = state => ({
  sharedData: state.dashboardData,
  childOneData: state.childOneSpecificData,
  childTwoData: state.childTwoSpecificData,
});

export default connect(mapStateToProps)(DashboardExample);

Answer 1

如丹·阿布拉莫夫（Dan Abramov）所说，很高兴在Presentational Components和Container Components之间进行划分。

其他组件

关心事物的外观。
内部可能包含表示性组件和容器组件**，并且通常具有一些自己的DOM标记和样式。
通常允许通过this.props.children进行围堵。
与其他应用程序无关，例如redux操作或商店。
不指定如何加载或修改数据。
仅通过道具接收数据和回调。
很少有他们自己的状态（当他们这样做时，它是UI状态，而不是数据）。
被写为功能组件，除非它们需要状态，生命周期挂钩或性能优化。

容器组件

关心事物的运作方式。
内部可能同时包含表示性组件和容器组件**，但通常没有任何自己的DOM标记，除了一些包装div之外，并且从未具有任何样式。
为演示或其他容器组件提供数据和行为。
调用redux动作并将其作为表示组件的回调提供。
通常是有状态的，因为它们倾向于充当数据源。
通常使用高阶组件生成，而不是手工编写。例如，React Redux的connect（），Relay的createContainer（）或Flux Utils的Container.create（）。

source post

————————————

您问题的具体答案：

我发现尝试坚持上述原则很有帮助。它使您的代码易于推理，并有助于分离关注点（视图/业务逻辑）。但是，如果您发现自己编写了spaguetti道具来坚持使用它，或者在特定的代码段中感觉不自然，则只需连接Presentational Component。

最好将redux状态下发给子级作为道具，还是让孩子直接从redux状态下读取？

1 个答案: