问题标签 [high-order-component]

join()数组中有什么用？

在其他语言中，它用于将数组的元素连接成字符串。例如，
Ruby Array.join

我问了一些关于 Swift Array join EXC_BAD_ACCESS中的 join() 的问题

我正在尝试使用 ES6 语法构建一个 ReactJS 高阶组件。这是我的尝试：

在这里，AppContextLoader从数据库中获取上下文并将其提供给上下文，如下所示：

和用法：

出于某种原因，我的包装组件 ( Dashboard) 没有获得我的context财产，只有原始的 (title和module)。

如何使用 ES6 语法正确编写 HOC？

我想创建一个高阶组件来处理它的子级根据传递的permissions属性呈现的方式。

这是我现在所拥有的：

这是一个使用示例

这是有效的，但我想做的是根据组件的类型有额外的行为

• 例如，如果它是一个input元素并且没有编辑权限，则创建该字段readonly
• 如果它是一个textarea元素并且没有查看权限，则创建该字段readonly
• 如果它是一个链接并且没有查看权限，请删除它的href道具等......

这件事甚至可能吗？有没有更好的方法来解决这个问题？

我编写了一个 React/Typescript 高阶组件来启用基于用户权限显示/隐藏组件。

在我尝试使用 ReactBootstrap NavDropdown 之前，它运行良好。单击包装的 MenuItems 不会关闭菜单。

我意识到“onSelected”道具（由 NavDropdown 组件应用）没有被向下传播到 MenuItem。为了尝试解决这个问题，我添加了代码来手动向下传播道具，但点击仍然没有关闭菜单。

谁能告诉我哪里出错了？

更新：经过进一步测试，即使包装在 React.Fragment 中也会导致此问题。

导航：

包装：

我最近在我的 tabNavigator 的屏幕上添加了一个 withState HOC，我发现了以下问题：

问题截图

这是一个解决问题的博览会小吃： https ://snack.expo.io/@softhib/tabnavigator-and-recompose-withstate

问题出在第 152 行的 HomeScreen.js 上。

我试图理解这个 HOC 的基本示例：

让我烦恼的是 this.props 在 return 语句中的使用：

据我了解，“this”指的是 PP 的实例？所以我们用 PP 的 props 实例化 WrappedComponent，它们是 React.Component 的 props，对吗？我确实了解我们也将 newProps 添加到这些道具中，但我只是不明白我们在这里用 this.props 做什么。

此外，PP 的构造函数正在获取一些道具作为参数。PP究竟是如何实例化的？ppHOC(MyComponent) 返回的类 PP 不是它的一个实例，对吗？为了实例化 PP，您必须执行“ppHOC(MyComponent)(someProps)”之类的操作？

我正在尝试创建一个从 React 获取参数的装饰器。上下文提供者，如果我想创建 HOC 很容易：

但我不确定如何像装饰器一样编写它：

想象一下有 React 组件

li我想创建修改所有节点样式的高阶组件。

但。这行不通。孩子们是空的。

有趣的是，如果我直接创建组件，这会起作用，比如

问题：如何访问任何 React 元素的子孙？

我想实现一个更高阶的反应组件，它可以用来轻松跟踪任何反应组件上的事件（如点击）。这样做的目的是轻松地将点击（和其他事件）挂钩到我们的第一方分析跟踪器中。

我遇到的挑战是 React 合成事件系统要求事件（如onClick）绑定到响应 DOM 元素，如div. 如果我要包装的组件是自定义组件，就像通过高阶函数实现的每个 HOC 一样，我的点击事件不会正确绑定。

例如，使用此 HOC，onClick处理程序将为 button1 触发，但不会为 button2 触发。

带有工作示例的 CodeSandbox： https ://codesandbox.io/embed/pp8r8oj717

我的目标是能够使用这样的 HOF（可选地作为装饰器）来跟踪对任何 React 组件定义的点击。

我能想到的唯一解决方案是在每个孩子上使用 a并在填充Ref后手动绑定我的点击事件。Ref

任何想法或其他解决方案表示赞赏！

更新： 使用remapChildren@estus 回答中的技术和更手动的方式来渲染包装的组件，我能够让它作为一个高阶函数工作 - https://codesandbox.io/s/3rl9rn1om1

我有一个 HOC 组件，它包装了 React 的上下文 API，如下所示

和另一个使用这个 HOC 的组件

我打算编写一个单元测试来测试Hello组件。为了实现这一点，我有以下单元测试

但它在这一行失败 const wrapper = mount(<Hello />); 并显示以下消息

你能告诉我我在这里做错了什么吗？

谢谢