时间戳

首页 > 解决方案 > 如何将数据传递给组件？

javascript - 如何将数据传递给组件？

问题描述

警告：您可能有拼写中风

嘿！我有一个非常简单的问题（也许）：我应该如何将数据传递给我的组件？现在我只能看到 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 开发人员会做什么？只使用一种方法？在不同的情况下使用两者？将这两种方法与修订相结合？使用第三种方法？

标签： javascriptreactjsreduxreact-redux

解决方案

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

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

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

    1. 您可以 作为回调传递，而不是传递sortType和向下传递。allOffersonSortChange
    2. 如果onSortChange在 a 中调用useEffect，那么您可能可以将useEffect自身向上移动到父组件中useEffect，如果它比调用 onSortChange.

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

    1. 重新设计状态/减速器
    2. 只将其中一个属性传递给减速器，并直接在减速器内部使用状态中的另一个

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

推荐阅读