问题标签 [higher-order-components]

我制作了一个 HOC 包装表单输入

我可以以某种方式跳过createClass(...)声明自己的部分Input吗？什么是 React 类的React.DOM.input元素？（我正在使用 React 0.13.3）

而不是自己的Input课程，我尝试同时传递React.DOM.input和React.createFactory('input')。这不起作用，触发以下警告消息：

警告：绑定 createElement(...)：render在返回的组件实例上找不到方法：您可能忘记render 在组件中定义，或者您可能不小心尝试渲染类型不是 React 组件的函数的元素。警告：不要设置 React 元素的 props 属性。相反，在最初创建元素时指定正确的值。

我们正在尝试自定义 HOC 的参数（特别是react-graphql）。由于这个特定库 HOC 的工作方式，我们无法在调用 HOC 后影响组件状态（查询和选项）。

在像connect()Redux 这样的传统 HOC 工厂中，所有包含的逻辑都会立即应用——这对我们来说还为时过早。相反，我将原始 HOC ( applyOriginalHOC()) 的应用推迟到从该组件构造第一个实例之前。

这似乎是一种非常规的方法，所以我正在寻找反馈：

• 你能看到改变 HOC 初始化顺序的副作用吗？我假设 HOC 不应该依赖其他 HOC 的存在。
• 无论如何，HOC 都无法进行静态分析（例如在 IDE 中），因此惰性评估不会使这变得更好或更糟，对吧？
• HOC 可以提供context给 React 组件，这些组件在嵌套组件中累积——顺序不重要，对吧？
• 组件定义永远不会被卸载，并且ComponentWithLazyHOC每个组件（不是组件实例）只创建一次。你能看到任何潜在的内存泄漏吗？

在我的代码库中，我有一个高阶组件 (HOC)，用于将所有输入验证功能添加到给定组件。在像这样定义的组件上使用它时效果很好......

但是我现在需要根据来自服务器的数组定义一系列输入。像这样的东西...

当您尝试从另一个组件中渲染调用 HOC 的结果时，React 不喜欢它。

我认为这与 mycomponentToRender不是真正的 React 组件或其他东西有关。

所以我的问题是...

为什么我不能从另一个组件中调用 HOC？

有没有办法在数组的每个元素上调用 HOC？

这是一个可能有帮助的 jsfiddle：https ://jsfiddle.net/zt50r0wu/

编辑以澄清一些事情：

我正在映射的数组实际上是一个描述输入细节的对象数组。包括输入的类型（选择、复选框、文本等）。

我的addInputValidationHOC 实际上也需要更多的参数，而不仅仅是组件。它需要一组存储索引，这些索引将从 Redux 存储中提取以用于验证。这些存储索引源自描述输入的对象数组中的信息。访问这个潜在的动态数组是我希望能够在 React 生命周期内调用我的 HOC 的原因。

所以映射我的输入数组可能看起来更像这样......

我想定义一个ExcludeCart<T>本质上但删除T了给定键（在我的情况下为）的泛型类型。cart因此，例如，ExcludeCart<{foo: number, bar: string, cart: number}>将是{foo: number, bar: string}. 有没有办法在 TypeScript 中做到这一点？

这就是我要这样做的原因，以防万一我找错了树：我正在将现有的 JavaScript 代码库转换为 TypeScript，其中包含一个名为的装饰器函数，该函数cartify接受一个 React 组件类Inner并返回另一个组件类Wrapper。

Inner应该带一个cart道具，以及零个或多个其他道具。Wrapper接受一个cartClient道具（用于生成cart要传递给的道具Inner），以及任何Inner接受的道具，除了 cart.

换句话说，一旦我知道如何定义ExcludeCart，我想用它来做这个：

我有一个通过高阶组件管理的受控输入表单。结构是这样的：

场高阶组件

场地

当使用TextField它时效果很好 - 但是，我想更灵活地使用它 - 例如，我希望能够onChange在某些情况下增强功能，总是让它设置状态，但也让它根据状态做其他事情或使用的组件中的功能TextField。

我是否误解了 HOC 的工作原理？

问题

我正在编写一个 ES7 函数，该函数将由定义参数顺序的 API 调用：

我需要使用ownProps但不是state。是否可以编写函数定义，以便未指定第一个参数，或者任何尝试读取或写入它都会导致错误（“快速失败”）？

这不起作用

这看起来很吸引人，但当然_是一个有效的变量名......：

更多上下文

我的问题实际上是Skipping optional function parameters in JavaScript的镜像。

我的问题的上下文是我正在编写一对 React 组件，它们实现了一个按钮，当它被点击时会做一些事情。

内部组件指定布局，包括按钮文本，外部组件使 modal 可见，并使用 react-redux 的connect函数与内部组件组合：

用法是：

我想要做的是通过传递给 MyButtonContainer 的属性使按钮上显示的文本可配置：

通过使用用于将状态映射到 props ( ownProps) 的函数的第二个参数，我可以访问该text属性，但我仍然不需要状态中的任何内容，因此为了清楚起见并减少导致错误的机会，我想编写 mapStateToProps函数使第一个参数不可用。

我是从 ES7 转译的，所以任何标准的 ES 都可以。如果有提议的扩展，我也可以使用那些（感谢 webpack）。

或者，如果在 React 中有更好的方法来做到这一点，我也会对该解决方案持开放态度。

为什么不将按钮文本放在 redux 商店中？

这是一个技术选项。我不喜欢它有几个原因： - 按钮文本是内部组件的属性，如果我不使用 HOC 来包装它并提供按钮功能，我只需将其直接指定为属性 - 放置它在 redux store 中的编码开销很大——编写 reducer、store initialisers、action creators，一定有更好更简单的方法！- 我想在同一个渲染页面上显示多个按钮，每个按钮都有不同的文本 - 无论我要在容器类上指定什么属性，让它显示的文本看起来最干净

我在高阶组件中提取输入值 onChange 时遇到问题。

我想将输入值分配给我的 contactFormData objectc 属性。

代码：

当我 console.log 我的对象时，所有值都是预期值的“代理”

安慰：

我正在构建一个 HoC，以便轻松创建可选择的表行。我正在尝试编写测试以确保它使用正确传递的道具呈现包装的组件。不幸的是，我无法让我的测试正常工作，因为酶似乎没有将所有成分都渲染出来（或者，更有可能的是，我在做一些有点傻的事情）。

霍克

测试

当我wrapper.debug()在测试中尝试时，我得到了<hoc data-reactroot="" name="foo"></hoc>.

测试的输出（失败）是：

我正试图围绕高阶组件，这些组件与 Redux 容器组件相同。另外，推荐的编写高阶组件（容器组件）的方法是通过扩展 React.Component 的类，或者没有 redux 站点中给出的类。

我有一个 react (with redux & react-router) 应用程序，它在各个方面都需要根据商店中某些数据的状态以及与商店中的数据相关的一堆其他东西来了解用户是否登录.

为了实现这一点，我创建了一个高阶组件，如下所示：

我的问题是如何最好地将它包裹在我的各个组件周围？目前我已经实现了它，以便每个单独的组件在传递给 connect 时都会被包装，这工作正常但感觉有点低效。IE：

有一个更好的方法吗？