问题标签 [higher-order-components]

我是 React JS 的新手。将相同功能/特性应用于大多数页面的最佳实践是什么？

案例：我有 Employee、Department、Sallary Menu（组件），我希望所有这些页面都具有injectIntl​​ 功能和 react-router 提示功能，以防止用户在有更新（脏）表单时离开页面。

现在，我粘贴每个组件的代码，并在将新组件添加到我的应用程序时。我已经尝试过高阶组件，是否可以从 HOC 函数调用另一个 HOC 函数？injectIntl​​ 是一个 HOC 函数。我想建立我自己的 HOC，它将调用injectIntl​​。

我的 HOC：

I have this simple Higher-Order Component that works fine but it only accepts a single component:

How would one rewrite the HOC to accept multiple components (unknown number) and return them as siblings (one by one under eachother) together with their respective props?

I assume this is how you'd call a HOC with multiple components as it's just a function:

I know how to accept and destruct an unknown number of "normal" props, but I'm a but lost here when it comes to passed in components.

我希望我能以问题的形式理解所有这些。在过去的 7 个小时左右，我一直在努力解决这个问题，但没有成功。此时我的大脑已经干涸，无论如何我都处于死胡同。

我正在使用react 15.6.1、redux 3.7.1、react-redux 5.0.5、redux-immutable 4.0.0、redux-form 7.2.0、react-select 1.2.1。

我的应用程序具有使用 2 种不同表单（不同页面的不同表单）的字段 A 和字段 B 的搜索功能。我不认为这对这个问题很关键，但我正在使用 redux-form 和 react-select 作为表单和搜索字段。我将用户输入的搜索条件存储在我的搜索缩减器中，以同步不同表单中选择列表的自动填充等。

redux-form---->react-select(field A) ---->react-select(field B)

我的 Search reducer 在 initialState() 中使用 Immutable.fromJs()。减速器按预期工作。我遇到的问题是在哪里使用 HOC 以便将从 reducer 返回的Map对象转换为 react-select 组件所需的 JS 数组。

MainSearchForm.js：-

为了简单的示例，FormFieldA 和 FormFieldB 组件都遵循相同的：-

所以 react-select 组件中的 options 属性必须是一个 JS 数组：-

我可以使用 Immutable.toJS() 进行转换，但 Redux 官方指南出于性能原因建议不要这样做，建议使用（我假设可重用）HOC 组件将不可变映射解析为 JS 数组的这种模式。

我的问题是，我将如何合并它？正如您在上面的代码中看到的，现在我的 MainSearchForm 正在连接到 Redux 存储以检索作为 react-select 选项道具的选项所需的选项数据。答案是否只是没有 MainSearchForm，而是为 MainSearchForm 呈现的每个字段都有一个中间组件，这个中间组件在使用 connect 之前调用 HOC，如指南中所示：-

Redux 不可变指南中的 HOC：-

示例中介智能组件通过 HOC 解析不可变映射并使用 FormFieldA 连接（）：-

那会是最佳实践吗？

我真诚地感谢任何帮助。这是我第一次与 HOC 和 Immutable 合作，有很多东西需要吸收。但我想我终于掌握了这个范式。

我正在学习反应。在我看来，HOC 就像 React 官方文档中的以下示例：

可以这样改写：

然后像这样使用它：

<WithSubscription component={BlogPost} selectData={(DataSource) => DataSource.getComments()} />

他们都是HOC吗？什么时候一种风格比另一种更受欢迎？

我试图理解 React 的高阶组件结构，但所有资源只是假设您在编写时已经了解扩展运算符在高阶组件中的作用：BaseComponent {...this.props} {。 ..this.state} 。如果组件已经作为 props 传入，为什么还需要像这样分散 props？

我写了一个高阶组件：

我在我的 App.js 中使用上述内容：

但是，我得到的警告是：

警告：函数作为 React 子级无效。如果您从渲染返回一个组件而不是 <Component />，则可能会发生这种情况。或者，也许您打算调用此函数而不是返回它。在 NewHOC（由 App 创建）在 div（由 App 创建）在 App

Movie.js 文件是：

我究竟做错了什么？

我试图了解为什么我的玩笑/酶测试失败了。我有一个组件，我使用composeredux 中的函数，结构如下：

在我的笑话测试中，我这样做：

但是，我收到诸如“无法读取未定义的属性‘状态’”之类的错误。我知道使用浅层渲染并不能提供我需要的确切结构，但我不确定还有什么可以尝试获得正确的结构。我尝试浅渲染包装的组件，然后在其中找到未包装的组件，就像这样，component = shallow(<MyComponent {...props} />).find('MyComponent').shallow();没有运气。任何其他建议将不胜感激。`

我想创建一个像 react-router 这样的 HOC，它为组件提供一些与上下文相关的数据。上下文数据需要从服务器获取。

我正在使用它

问题是我包装它的每个组件都会调用 HOC。因此，对服务器的调用会发生多次。但是，我只需要 HOC 运行一次并向使用 HOC 的任何组件提供上下文。如何在 React 中实现这一点？

我有一个显示样式文本的 React 组件，我想让它加载网络资源、侦听 WebSocket 输入并显示通知。为了做到这一点，我为其中的每一个编写了高阶组件包装函数：withResource、withSocket和withNotifications。

导出组件时，这是正确的吗？

我已经设置了 Material-ui 和 redux 并且可以正常工作，但是 redux 让你使用 connect 与更高阶的组件：

而 Material-ui 文档让你做了类似的事情：

您如何将主题与 redux 导出相结合以使它们导出或协同工作？