如何将数据传递给组件？

Question

警告：您可能有拼写中风

嘿！我有一个非常简单的问题（也许）：我应该如何将数据传递给我的组件？ 现在我只能看到 2 个解决方案：props（从 App 到我的组件）和 redux（mapStateToProps、mapDispatchToProps）（我们现在跳过 ContextAPI）

---

案例#1（道具（从应用程序到我的组件））

例如，我的网站上有一个商品清单。然后我的列表必须接收数据来呈现它。我应该通过 App、Main、SomeWrapper、SomeOtherWrapper、GoodsList（例如）传递它，不要犯错误，然后才渲染所有商品。现在，假设我需要将 onCLick 添加到 GoodsItem => 我需要通过所有组件传递 onGoodsItemClick，修复所有测试（因为 PropTypes 会警告）和 PropTypes。这有点复杂，例行公事，技术含量也不高，不是吗？

案例 2（redux（只通过 mapStateToProps、mapDispatchToProps 的需求道具））

好的，我们来看看第二种情况：排序组件。我已经为我的组件编写了连接函数。它们看起来像这样：

const mapStateToProps = (state, ownProps) => ({
  ...ownProps,
  sortType: state.sortType,
  allOffers: state.allOffers // allOffers imports only for mapDispatchToProps
});

const mapDispatchToProps = (dispatch) => ({
  onSortChange: (allOffers, sortType) => {
    dispatch(ActionCreator.changeSortType(sortType));
    dispatch(ActionCreator.sortOffers(allOffers, sortType)); // allOffers is using only here
  }
});

在这里，我必须接收 allOffers 才能为 mapDispatchToProps 提供排序功能（也许这里有错误。据我所知，ActionCreator 无法访问存储，只能使用 args）。为什么我要接收数据，它甚至不会在页面上呈现？

React 开发人员在这种情况下会做什么？只使用一种方法？在不同的情况下使用两者？将这两种方法与修订相结合？使用第三种方法？

Answer 1

我想我们同意您的“案例 #1”示例是错误的方法。

您的 redux 示例（“案例 2”）表明您将 sortType 和 allOffers 传递给该组件只是为了有一些地方可以调用 useEffect 或其他东西，而该组件根本不关心关于这些属性。

1. 那么为什么要使用这个组件来调用onSortChange()，为什么不在父组件中处理呢？

   1. 不用向下传递sortType和allOffers，你可以传递 onSortChange 作为回调。
   2. 如果onSortChange 在useEffect 内被调用，那么您可能可以移动useEffect 本身 到父组件中，也许将它分成两个useEffects，如果它做的不仅仅是调用 onSortChange。

2. sortType 和 allOffers 是 redux 状态的属性，所以你可能不知道 根本需要传递它们，因为它们在减速器中可用。如果你有不同的 减速器并且它们都没有同时具有两种状态，您可以考虑

   1. 重新设计状态/reducers
   2. 仅将其中一个属性传递给减速器，并使用来自 state 直接在 reducer 中

注意：直到现在，我一直为此类问题找到“干净”的解决方案，但我仍然不确定 如果它确实总是可以完成，或者这通常是可以回答的。如果我的解决方案不是 可能适用于您的用例，请随时添加评论以解释原因（或相应地更新您的问题）。