将 ReactforwardRef 与 Redux connect 结合使用

2024-02-17

我有一个正在使用的 React 功能组件forwardRef像这样:

const wrapper = React.forwardRef((props, ref) => (
  <MyComponent {...props} innerRef={ref} />
));

export default wrapper;

现在我想使用以下方法将一些状态传递给该组件mapStateToProps与 Redux 的connect像这样的函数:

export default connect(mapStateToProps, null)(MyComponent);

我尝试通过以下方式将它们组合起来,但没有成功:

const wrapper = React.forwardRef((props, ref) => (
  <MyComponent {...props} innerRef={ref} />
));

export default connect(mapStateToProps, null)(wrapper);

我如何将这两者结合起来以获得所需的行为?


您可以使用options https://react-redux.js.org/api/connect#options-object在连接功能中。

connect(mapStateToProps, null, null, { forwardRef: true })(wrapper)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 ReactforwardRef 与 Redux connect 结合使用 的相关文章

  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react
  • React Context 的范围是什么?

    我不清楚在哪里Context可以在 React 应用程序中创建 我可以在组件树中的任何位置创建上下文吗 如果可以 该上下文的范围是否仅限于创建它的子级 或者 Context 本质上是全局的 我可以在文档中的哪里找到这个 案例 我在页面上多次
  • React - 检查元素在 DOM 中是否可见

    我正在构建一个表单 用户需要回答一系列问题 单选按钮 然后才能进入下一个屏幕 对于字段验证 我使用 yup npm 包 和 redux 作为状态管理 对于一种特定场景 组合 会显示一个新屏幕 div 要求用户进行确认 复选框 然后用户才能继
  • useLocation 挂钩 - 确定过去的位置

    根据 React Router 5 1文档 https v5 reactrouter com web api location应该可以看到 应用程序现在在哪里 你想让它去哪里 甚至它曾经在哪里 在我的应用程序中 我需要查看 它在哪里 我访问
  • React-redux useDispatch() 未捕获类型错误

    我正在尝试创建一个简单的组件来使用 React Redux 钩子分派操作useDispatch 我收到一个错误 我已将组件修剪到发生错误的位置 当调用 useDispatch 函数时会发生这种情况 import useDispatch fr
  • React无限滚动scrollableTarget动态获取id?

    我在我的项目中使用react infinite scroll component 如何让scrollableTarget动态获取item id 我试过这样scrollableTarget item id 但它不起作用 必须与该 div 具有
  • React Native 反应导航 SafeArea 问题

    我更新了我的android项目 react navigation was 3 x 搬去5 x 决定实施必要的更改 但它不想工作 从反应导航页面复制了示例 但仍然显示相同的错误 有人知道问题出在哪里吗 当我用谷歌搜索一半的互联网时找不到解决方
  • 在 JSPdf 中嵌入二进制文件

    我在用着JsPDF https www npmjs com package jspdf将 html 内容导出到下载的 PDF 考虑以下示例 该示例获取一些 HTML 内容并将其输出到下载的 PDF 文件 使用JsPdf import Rea
  • 带有 'as' 属性的通用 React TypeScript 组件(能够渲染任何有效的 dom 节点)

    我在下面的示例中按预期工作 我的问题是 无论如何我可以重写它 这样我就不必传递通用的T和as支柱 理想情况下我想通过asprop 并让组件的 prop 接口使用它 这在 TypeScript 中可能吗 export type Props l
  • 如何通过比较React中同一数组中的Id和reference_id来重新排序数组列表

    这是我得到的数组 id 1 name hello world reference id null id 2 name hello world reference id null id 3 name hello world reference
  • 删除旧版本的 create-react-app

    我想使用创建一个新的反应应用程序create react app脚本 我仍然安装了一个不再受支持的全局版本 因此我卸载了全局版本并尝试创建一个新版本 如下所示 npx create react app myapp 然后我得到了一个没有使用模
  • React Native Expo StackNavigator 重叠通知栏

    我正在尝试为我的 React Native Expo 应用程序实现导航栏 这里有一个问题 dependencies expo 18 0 3 react 16 0 0 alpha 12 react native 0 45 1 react na
  • 从 Flask 运行 NPM 构建

    我有一个 React 前端 我想在与我的 python 后端 API 相同的源上提供服务 我正在尝试使用 Flask 来实现此目的 但我遇到了 Flask 找不到我的静态文件的问题 我的前端构建是用生成的npm run build in s
  • NGXS 状态大小和性能

    Angular 中类似于 redux 的模式给我留下了深刻的印象 并且我迷上了 NGXS 我将其与 NGRX 和 Akita 进行了比较 但选择了 NGXS 我知道 NGXS 存储应用程序中的所有先前状态 因此如果我有一个非常复杂的 UI
  • React:搜索过滤器无法正常工作

    我通过 API 从服务器获取记录 API 是在 Loopback 中构建的 实际上 我在每个页面上显示 5 条记录 目前工作正常 我可以导航next or prev通过分页按钮 每页显示 5 条记录 问题是 当用户在搜索框中键入内容时 记录
  • 错误:最终加载程序(./node_modules/awesome-typescript-loader/dist/entry.js)未返回缓冲区或字符串

    dockerhub构建dockerfile时出现此错误 错误 最终加载程序 node modules awesome typescript loader dist entry js 未返回缓冲区或字符串 我在网上搜索了各种解决方案 但没有找
  • React中ComponentDidMount生命周期方法被调用两次

    在我的 React 应用程序中 加载应用程序时会进行两次初始 API 调用 我查看了 Chrome gt inpsect 中的网络选项卡 启动器 调用堆栈显示第一个调用是从VM123000 bundle js而第二个调用只是从实际的bund
  • React-Redux - 未处理的拒绝(错误):操作必须是普通对象。使用自定义中间件进行异步操作

    我是 React Redux 的新手 我正在尝试调度一个操作 但它显示 未处理的拒绝 错误 操作必须是普通对象 使用自定义中间件进行异步操作 这是我的动作创建者 import axios from axios import GET CHAR
  • 新部署后,React 应用程序必须清除浏览器缓存

    我们正在使用 Jenkins 管道在 apache 服务器上部署 React 应用程序 当我们部署新代码时 大多数新功能都可以正常工作 但并非所有更改都反映浏览器中的最新内容 用户必须打开隐身窗口或清除缓存才能看到新功能 我见过一些相关的解
  • 为子元素提供属性时,如何为 React.cloneElement 分配正确的类型?

    我正在使用 React 和 Typescript 我有一个充当包装器的反应组件 我希望将其属性复制到其子组件 我正在遵循 React 的使用克隆元素的指南 https facebook github io react blog 2015 0

随机推荐