问题标签 [higher-order-components]

想象一下，我有一些“页面”组件，它需要从服务器请求数据。它请求的数据将取决于当前用户是否经过身份验证。此外，在登录的情况下，页面将需要重新加载数据。我的问题是，我怎样才能使用 HOC 而不是继承来完成这样的事情？

为了说明这个问题，我将演示一个使用继承的解决方案。该程序将具有以下对象。我将省略样板代码。

• session：当会话更改（登录或注销）时发出的EventEmitter。start
• Page：所有页面继承自的超类
• MyPage：Page本例中的子类
• API: 将是一个用于从服务器检索数据的 API 类

这是代码：

这是一个使用 HOC 的解决方案，但似乎不如继承优雅。它仍然要求每个“子类”页面都有一个方法loadData，并且要求在每个“子类”中调用该方法componentWillMount。

这种模式经常发生：我想加载一些数据，然后在会话更改时重新加载。我想了解完成相同操作的“反应”方式。

编辑：我不想通过 HOC 传递用户名或“loggedIn”标志。也就是说<WrappedComponent isLoggedIn={session.isAuthenticated()} {...props} />，这里不会削减它。将 API 逻辑绑定到props要求我检查MyPage.componentWillUpdate().

我正在使用 react-router v4，我正试图解决与 react-router / redux / HOC 相关的问题。我有一个更高阶的组件在工作。HOC 本身是connect()-ed 到 redux 存储。<Route />如果我通过component道具将它连接起来，这种方法非常有效：<Route path="/profile" component={ withAuth(Profile) } />确实有效。

但是，当我尝试对 a<Route />和渲染道具执行相同操作时，它不起作用：控制台<Route path="/profile" render={ () => withAuth(Profile) } />抛出“ Route.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.” 当我省略 HOC 时它确实起作用：<Route path="/profile" render={ () => <Profile /> } />所以我怀疑 HOC 有问题，但我找不到它。

我尝试使用的原因render是我想将额外的道具传递给 HOC。除此之外，我找不到错误。

任何有新眼光的人都可以看看并让我走上正确的道路吗？谢谢！

假设我使用的是正确的模式，我希望能够从 inside 调用someFunc()- 这是 inside <Home/>- <Wrapper/>。见下文：

更新解决方案：https ://codepen.io/oldgithub/pen/qPOZEj

父组件，我通常会将一个函数作为道具传递给子组件

子组件，在这里我通常会调用传递的函数并返回数据，但由于它是一个 HOC 组件，我收到错误消息“_this.props.someFunction 不是函数”，但我不知道为什么？

我在阻止未经授权的用户访问仅授权的路由/组件时遇到问题 - 例如登录用户仪表板

我有以下代码：

路由器：

我尝试记录以检查是否输入了条件，但是我从渲染函数中得到一个错误，说它无法读取 null 的属性。

有没有办法解决我的问题以及更好的方法来满足我的要求？只有授权用户才能严格访问特定组件

我创建了一个通用组件，用作其他组件用作标签的包装器。这是我的通用组件：

我想用它作为我的通用组件来渲染不同的标签组件，例如：

和

ETC...

我如何使用 HOC 来做到这一点？

• 我是 React 的新手，正在尝试实现一个应用程序。基本上我的应用程序有几条路线。每条路由都由同一组后端数据+一些特定于路由的 api 调用支持，将后端数据属性作为 api 参数。

• 因此，我编写了一个高阶组件来调用 API 以检索后端数据，将状态存储在 redux 存储中并将其作为道具传递给可以正常工作的包装组件。

  /li>

• 但问题是所有路由都调用 API。每个完整的应用程序流应该调用一次。

• 组件特定数据获取发生在公共后端数据可用之前，导致组件特定 API 调用失败。
• 用户可以输入 URL 并启动应用程序内的任何路由，API 只需调用一次，HOC 必须根据数据系统地路由到正确的路由。请告知设计方法

对于这个愚蠢的问题，我很抱歉，我正在学习 React，所以我根本不是专家。

我想知道是否有一种方法可以使用某些功能扩展我的无状态组件，而无需始终围绕它们创建包装器，它们将连接到 Redux 存储并通过道具传递数据。

高阶组件是最好的方法吗？

让我用几行代码更好地解释一下。下面的示例组件应在用户单击事件上调用 API /favourites (POST) 以创建“收藏”实体，并将调用相同的 API (DELETE) 以删除它。

这是我意识到的解决方案：

};

DataProviderApiFavourites 有一个属性“create”，它接受 JSON 有效负载，它将触发 Saga 捕获的 Redux 操作（谁将调用 API），它还能够通过 createListener 函数通知结果。它与 delete 属性相同（但它会调用 delete API 并通过 favoriteDeleteHandler 通知）。

考虑到 FavouriteComponent 是一个无状态组件，为了在 UI 组件中使用数据组件的功能，它是否是一个好的结构？

实际上，DataProviderApiFavourites 可以在不嵌套子组件的情况下使用，它返回 null 或 this.props.children 如果设置。

如果有人能帮助我了解我是否会做错事，我将不胜感激。

我正在创建一个 React 应用程序，需要添加一些定制的 D3 图表。我想将图表合并到应用程序“流程”中并利用 React 组件生命周期方法，但我也希望能够像我习惯的那样以自己的方式编写 D3 代码（输入 - 更新- 退出模式等），而不用像vx或react-d3这样的 React 组件包装图表的各个部分。

到目前为止，我发现 - react-faux-dom看起来很有希望，但是该项目需要包含尽可能少的外部依赖项。

我在使用 HOC 时遇到了 Flow 错误，它只是注入了一个 prop，使用以下定义：

但是，当我更改为此版本时，Flow 不再抱怨：

我认为它们是等价的，但我猜不是。有人可以解释有什么区别或指出一些文档的方向吗？

流量版本：0.56

PS：这两种方法的真实示例可以在流类型存储库中withRouter (react-router) 和injectIntl​​ (react-intl) 的流定义中找到。

编辑：我创建了一个干净的 create-react-app 项目来显示这个问题。该项目有 2 次提交，第一次有 Flow 错误，在第二次提交中通过将 injectIntl​​ 的定义从交集更改为扩展来修复。https://github.com/hyperivo/sandbox-stackoverflow-46591826

编辑 2：流类型项目中的问题：https ://github.com/flowtype/flow-typed/issues/1314

谢谢