问题标签 [high-order-component]

我正在使用 Next.js 框架 (v5) 开发 I18n 模块。

为了以用户的默认语言显示 UI，我试图找出该语言是什么，普遍的。

从浏览器解析语言“相当简单”，但我很难弄清楚如何在服务器端做到这一点，同时将该值提供给包装我的页面的 HOC，以便我可以在我的请求headers使用的语言环境，以获取该语言的内容。

我想出了如何使用accept-language标头从服务器解析用户的语言pages/_documents.js：

这工作正常。

但是，我需要mostPreferredLanguage在包装 Page 组件的 HOC 中访问它，我真的不知道该怎么做，因为 HOC 代码是在函数之前执行的getInitialProps。req.headers据我所知，我无法从 HOC 本身访问。

HOC实施：

潜在的解决方案

还原

我一直在考虑使用Redux。我试图实现它但被阻止了，因为它似乎无法在服务器端使用 Redux。

Redux 的想法是用来getInitialProps解析语言并将其存储在 redux 中，然后在运行我的graphql()HOC 查询之前连接到商店，因此使语言在 HOC 中可用props，graphql以便我可以运行查询正确的标题。

但如前所述，Redux 在服务器端不可用，并试图通过_document.js使服务器崩溃来初始化它。见https://github.com/zeit/next.js/issues/3990#issuecomment-372159451

饼干

我也尝试使用 cookie，但是当我成功地从浏览器/服务器读取 cookie 时，我无法在_document.js getInitialProps函数内部的服务器端写入它们。我不知道为什么，现有的例子并没有帮助我。

我有一个布局 HOC 调用“withLayout”

所有页面都是这个组件的布局

但是在主页中，我们需要不同的标题，例如<Header1 /> 和其他页面使用

我怎么能把道具传递isHomePage给withlayout?

我有一个列表应用程序，用户可以在其中添加多个类别的项目，当他们想要添加新记录时，有 3 个具有此特定功能的相关屏幕。所有这些屏幕都有<Header/>组件，所以我认为 HoC 在这里会很好，这样我就可以在 3 个屏幕上重复使用它。但是，我无法完成它。

这是我到目前为止所尝试的：

这是我的 HoC 课

这是我的屏幕：

之后我收到错误

而且我不知道如何修复它，因为这是我第一次在 react-native 应用程序上使用 hocs。我已经查看了为什么会弹出此错误，他们建议以这种方式导入组件：

但即使这样也没有解决它。

任何帮助将不胜感激，谢谢。

我正在尝试制作一个高阶组件，该组件应该用 TouchableWithoutFeedback 包装一个组件，以便在用户在键盘外按下时隐藏键盘。

我的高阶组件如下所示：

在我的 LoginScreen 中，我用我的 HOC 包装了它：

export default DismissKeyboardHOC(LoginScreen);

我面临的潜在问题是，当我查看检查器时，TouchableWithoutFeedback 最终会环绕我的 LoginScreen 而不是环绕 SafeAreaView（它应该在哪里）。

我试图手动将 TouchableWithoutFeedback 放在 LoginScreen 中，它可以完美地工作，但我不能在我的 HOC 中工作。

我正在尝试使用 TypeScript 定义一个更高阶的组件，但我遇到了奇怪的错误。

我曾尝试查看反应类型定义以了解问题，但没有成功。

下面的代码是使用 'create-react-app' - 'create-react-app hoc --typescript' 生成的 react 应用程序的一部分

这是我的 tsconfig.json -

这是我运行应用程序时的打字稿错误-

我不明白为什么 JSX 片段被 Typescript 解析为布尔值。我在这里做错了什么？

我有这个高阶函数：

它应该基于我在条件中使用的一些道具来渲染我的元素。

它从 * Parent 类 Component获取道具，后者从 redux 商店获取这些道具。

*链接到我的仓库以检查整个文件

上面的 HOC 几乎是完美的，但是当有人出于某种原因尝试注销时，我在导航的左侧链接上得到了这种行为。

我开始认为问题可能是由于重新渲染而我没有做任何事情。

我最近在一个组件类中了解到，componentDidUpdate当组件发生变化时，您会使用生命周期方法。

所以我做了一些挖掘广告，发现这篇关于在 HOC 中应该使用的方法的帖子。我的问题是它应该去哪里？

其实我也想过这样的事情，但是没用。。。

导入反应，{ useEffect } from 'react';

}, [route]);}>{anchorText} } else { return null } } else { return 登录！} }

无论如何，我只是想了解一下为什么当您单击注销按钮时，其他导航链接也说登录...

我正在阅读 React 文档，它建议如果你有一些会经常更改的道具，那么应该使用一个好的生命周期方法是shouldComponentUpdate。

我的问题是您将如何将useEffect方法与如下功能组件一起使用？

这是我的功能组件：

这是我的看法，但它没有用！哈！有没有人可以提供见解？

更新 我遵循了舒巴姆的处方——但遇到了这个？

所以我这样做了......但它感觉很hacky：我想它不是因为我正在利用词汇范围

我制作了一个 HOC，用于在加载组件时显示加载模式。

我用它作为

它工作正常，直到我意识到navigationOptions停止工作，这很明显，因为withLoading返回了一个没有的组件navigationOptions，所以我的解决方法是。

然后设置navigationOptions为LoadingMyComponent。

但这看起来很糟糕，并不比拥有一个用于加载和渲染的状态更容易Loading。

有没有办法将这个 HOC 转换成一个反应钩子或者做一些我不会弄乱的事情，navigationOptions并且还封装了Loading组件和逻辑。

我有主布局组件，通常当我更改路线链接 {this.props.child} 时只需要更改。

这是我的布局组件。index.js

当我构建我的应用程序时，首先从服务器获取数据，看起来像这样；

AsideFirst 组件

在这里没问题...

但，

当我更改路由组件重新创建时，这是我的app.js*

我的布局组件（所以 AsideFirst）在每次路由更改时都从服务器获取数据，尽管路由组件是子组件。示例路由组件；

复杂推送组件

因此，尽管我的所有父组件布局，但当路线更改时，Asidefirst（内部布局）一直在安装。我不想要这个。我该如何解决这个问题？

我是 React 的新手，仍在努力理解 HOC。

我们知道：

HOC 是一个函数，它接受一个组件并返回一个新组件，该组件环绕它以提供附加功能。

例如：

所以 ProFeature 是一个 HOC。

但是要调用一个东西成为一个组件，它需要直接渲染内容。例如，对于名为 customComponent 的无状态组件，我们应该能够通过以下方式呈现其内容：

但我们不能在 HOC 上这样做：

相反，我们需要做：

然后

所以 HOC 不是一个组件？如果不是组件，为什么叫高阶组件？它不应该被称为高阶函数等吗？