问题标签 [higher-order-components]

我正在尝试在我的反应应用程序中实现一个高阶组件。我有一个包含所有常规登录的基本表单组件，然后我制作了一个包含此常规组件的 ContactForm 组件。

问题是我的页面变得无响应并在我尝试运行它时给出最大堆栈超出错误。经过一番研究，我发现问题是在通用表单组件的渲染方法中调用了一些自定义组件。但这与我在 app 中随处使用的语法相同。

为什么反应导致这个问题以及如何解决它，我是否以错误的方式实现 HOC 逻辑？我需要在表单中导入这些组件，因为它们自己处理一些逻辑并有助于分离关注点。

下面是通用和 HOC 组件的代码。

联系表单组件

基本表单组件

输入文本

提交按钮

我可以使用每个容器中的条件显示加载器图标，但是当使用更高阶组件时，我无法显示它。我在下面发布了我的代码。我用过 immutable.js，redux-saga。下面是我编写的代码，它不起作用

我正在构建一个应用程序，其中有大量页面，每个页面都需要加载器图标来显示数据何时来自服务器但尚未到达但如果根本没有数据则不显示任何内容。我可以在不使用高阶组件（HOC）的情况下毫无问题地展示这一点，但在每个组件中这样做都很乏味。我希望加载器代码可重用，以便我可以在需要的每个组件中使用它。但我正面临这个问题。

如果有数据，就没有问题。如果根本没有数据，那么加载器会继续加载并且加载应该不显示任何内容。

我必须if (!this.props.size)在 componentDidMount 内部使用来获取数据，因为如果我不这样做，组件将连续重新渲染，如果我这样做，如果有数据，组件将不会重新渲染，但如果根本没有数据，组件会随着加载图标不断重新渲染。

这是代码

完整的代码在这里https://gist.github.com/SanskarSans/b30c085ffacf01c58b66f128096746cc

实时预览：https ://www.webpackbin.com/bins/-KoSqF5OB0IRtbBEi822

我试图克隆和修改一个 React 元素对象。

我通过克隆并将 css 规则添加到样式表来删除 react 元素的内联样式

我正在使用这个功能

我想知道如何从 Element 的 Class 访问 React Render 函数返回值？

我有四种不同的布局。

• 主页布局 - 主页

• 管理布局

• 用户布局

• 代理布局

AdminLayout 是管理相关页面的父级，UserLayout 是用户相关等的父级。我使用高阶组件来检查用户是否未经身份验证，将它们重定向到主页。还有一个条件。也就是说，如果用户经过身份验证，但如果用户的角色不是管理员并且用户尝试访问 AdminDashboard，他/她应该被重定向到主页，并且与其他人类似。但是 Agent 可以访问 UserDashboard。

我得到的角色是形式

除了代理也可以访问代理仪表板和用户仪表板之外，不应访问其他仪表板。对于未经身份验证的用户，我可以在不登录的情况下访问仪表板时重定向到主页

重定向到未经身份验证的用户的代码正在工作，我已经完成了以下方式

管理布局

我从 localStorage 获得的 user_role 为JSON.parse(localStorage.getItem("user"))['userInfo]['user_role']

我创建了以下高阶组件：

这导致该组件被无限期地调用。（componentDidMount在myComponent意愿中，意味着正在重新创建此组件）。

我通过以下方式使用它：

删除 if 部分时：

该组件只会被调用一次。我试图深入调试 react lib 代码，但魔法对我来说是一个奇迹。任何的想法？

提前致谢！

编辑：

完整代码 myComponent：：

promise-middleware

解决方案：

正如@Shleng 注意到的那样，循环是因为我fetch在组件内部调用。我最终得到了简单的解决方案：

react-apollo在他们的文档中有一个示例，他们根据组件道具计算查询变量：

我有一个用例，我想根据组件道具更改查询，但很难弄清楚如何做到这一点。

更具体地说，我正在尝试更改CurrentUserForLayout从另一个文件导入的对象。

为什么higherOrderComponent1功能不起作用而higherOrderComponent2正常工作？根据文档，我似乎没有做错什么，但由于它不起作用，我一定做错了什么:-)

https://facebook.github.io/react/docs/higher-order-components.html

您可以在此处找到沙盒版本： https ://codesandbox.io/s/MRwMnA2R

我借用了前一个组件，我想保留一个像loggedIn这样的状态属性，然后在获取承诺之后更新这个组件状态，因为我不想像authed任何地方一样存储布尔属性。另外我是 react 和 react-router (V4) 的新手，我练习了 3 周，提前谢谢！到目前为止我得到了这个：

主要问题是我在该组件卸载之后设置了状态，我想要一种正确的方法来等待获取而不发出同步请求

我有一个无状态功能组件，它呈现（约会）时间线。它的签名是：

它通过 ajax 请求获取数据。为此，我创建了一个 HOC。你可以像这样使用它

然后我需要添加一些控件来调整时间线日期范围。我用作文做到了这一点：

所有这些都很好用，但现在我意识到我的Timeline组件比我最初想象的更实用。我想重用相同的组件和控件，但使用不同的数据源。

即，我想Timeline用不同的ajaxLoader. 问题是TimelineWithPicker现在已经AppointmentTimeline出现了。

TimelineWithPicker使我可以使用不同的数据源渲染时间线的最佳方法是什么？

我应该将子组件 ( AppointmentTimeline) 作为道具传递，还是应该作为道具传递route并data在渲染时动态构建新的 HOC？IE，

以这样的方式创建新组件是否昂贵render()？