问题标签 [react-popper]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1122 浏览

reactjs - 使用 react popper 的 usePopper() 钩子生成箭头时我缺少什么?

我正在尝试遵循 Popper.js 文档上的示例,了解如何使用他们的 usePopper 钩子实现此处找到的箭头:

https://popper.js.org/react-popper/v2/

我试着把它放在一个代码框中,然后 console.log 的 styles.arrow 并看到它正在打印这个:

所以我将此代码添加到我的打字稿应用程序中,它看起来像这样:

但是,当我在这里使用 console.log styles.arrow 时,它会返回未定义。我感觉这里有什么问题。我是不是宣布错了?

0 投票
1 回答
123 浏览

reactjs - React Popper 和 React CSStransition

我正在构建一个 React 项目。在项目中,我使用 React Popper 2 作为下拉菜单。非常适合在靠近 Web 浏览器边缘时自动定位下拉菜单等。我还使用 React Transition Group / React CSStransition 来制作一些动画。我在项目中使用钩子,没有类组件。

但我似乎无法将两者结合起来。问题是 Popper 进入和退出下拉菜单。所以 CSStransition 创建了它应该的类,但它不起作用,因为它们都进入和退出元素。我不知道如何解决这个问题。

参考:

https://popper.js.org/

https://reactcommunity.org/react-transition-group/

这是组件 atm:

我也尝试将 CSStransition 放在 popperElement 中,但这并不能解决问题。

任何人都知道如何让他们都工作?

0 投票
1 回答
547 浏览

reactjs - react-popper 组件钩子返回“TypeError:Object(...)不是函数”

我只是想在 react-popper 的文档中获取该示例的工作版本这就是我几乎逐字使用的内容。唯一的主要区别是我需要能够提供任何类型的组件作为道具来替换打开弹出框的按钮

在故事书中使用此组件失败,并显示“TypeError: Object(...) is not a function”以及其他信息很少

0 投票
0 回答
108 浏览

reactjs - 如何使用 popperjs 在 React 中为多个项目使用一个弹出框?

我想使用 PopperJS 为我的所有导航项使用一个弹出框。当用户将鼠标悬停在导航项上时,弹出框应显示在具有相应文本的位置。目前我的导航是这样的:

我需要改变什么才能让它工作?我该如何改进呢?

0 投票
0 回答
156 浏览

javascript - 如何在反应波普尔中旋转工具提示箭头?

我使用使用门户的 react-popper 创建了工具提示。我添加了将 altAxis 设置为 true 的修饰符以防止溢出(请参阅下面沙箱中的 option.js 文件)。现在在下面的沙箱工具提示正在翻转,但工具提示箭头也应该下降,这在我的情况下没有发生。知道我缺少什么吗?请查看以下沙箱代码: https ://codesandbox.io/s/focused-swanson-3b66w?file=/src/option.js:1289-1296

在下面的屏幕截图中,选项 3 的工具提示被翻转到顶部,但是当底部溢出时,但在这种情况下如何调整工具提示箭头?在下面的屏幕截图中,箭头仍在顶部而不是底部。

截屏

0 投票
1 回答
224 浏览

reactjs - 模块 '"react-popper"' 没有导出成员 'usePopper' #424

包版本 react-popper: "react-popper": "^2.2.5",

我们在 custom-ui-kit 项目中使用了它,我们能够修复该项目中的错误,但在使用它的项目中仍然存在问题。

0 投票
0 回答
55 浏览

reactjs - 无法为我的 React 应用程序添加引导轮播

我在引导反应页面中复制了轮播代码。它给出了这个错误:./node_modules/bootstrap/dist/js/bootstrap.esm.js Module not found: Can't resolve '@popperjs/core' in .....

.但是,我确实通过键入npm install popper.js 安装了 popper.js我也试过这个:npm install popper.js --save。我像这样在页面开头导入:

我做错了什么请帮助我。还应该在我的 index.js 文件中导入相同的内容。提前致谢。

0 投票
0 回答
69 浏览

javascript - 在弹出reactjs中打印表格行

我想将整个打印rowpopup. 意味着一旦用户单击特定行,该特定行必须在popup. 任何想法如何做到这一点。我可以创建静态弹出窗口,但我不知道如何table rowpopup和显示中传递整个内容。

这是popup.js

这是App.js

这是style.css

}

我需要将我的代码合并到下表的列中。怎么做。

在此处输入图像描述

0 投票
1 回答
173 浏览

reactjs - React Testing 库测试错误“NaN”是“left”css 样式属性的无效值

我正在使用使用React popper的内部库组件。组件是一个下拉菜单,当我单击标记的元素时应该打开它,就像任何其他下拉菜单一样。

我正在尝试使用用户打开下拉列表并进行一些交互的 React 测试库流程进行测试。但是当我让我的测试打开那个下拉列表时,它会抛出这个错误(警告):

这不是阻塞错误,而是警告,并且测试实际上通过了,但是当我运行测试时总是看到它很烦人。

我的问题是,如何在运行测试时不显示此警告文本?

这是测试代码:

0 投票
0 回答
32 浏览

reactjs - React-popper 溢出视口

我正在使用具有以下属性的 react-popper

我在 popper 中有很多选项,而 popper 似乎没有滚动条。当我单击切换按钮时,弹出器打开但一半内容被切断,因为它们落在视口之外。

有人能告诉我我该怎么做吗?