React Bootstrap - OverlayTrigger工具提示根据视口动态更改位置
React Bootstrap是基于React开发的一套UI组件库，提供了丰富的可重用组件，帮助开发者快速构建现代化的Web应用程序。其中，OverlayTrigger是React Bootstrap提供的一个组件，用于实现工具提示（Tooltip）功能，并可以根据视口的动态变化来自动调整工具提示的位置。
工具提示（Tooltip）是一种常见的用户界面元素，用于在用户将鼠标悬停在某个元素上时显示有关该元素的额外信息。OverlayTrigger提供了一种简单且灵活的方式来实现工具提示功能。通过将OverlayTrigger包裹在目标元素的周围，并提供相应的工具提示内容，用户在将鼠标悬停在目标元素上时，工具提示将自动显示。
OverlayTrigger的位置根据视口动态更改，意味着它会自动根据目标元素在视口中的位置来调整工具提示的显示位置，以确保工具提示不会超出视口边界或与其他元素重叠。这样可以提供更好的用户体验，使工具提示始终可见且不会遮挡重要的内容。
React Bootstrap中的OverlayTrigger组件具有以下优势：
- 简化开发：OverlayTrigger提供了一个简单的API来实现工具提示功能，开发者无需手动处理鼠标事件和位置计算，大大减少了开发的复杂度。
- 灵活定制：OverlayTrigger支持多种触发方式，如悬停、点击等，同时还可以自定义工具提示的样式和内容，满足不同场景下的需求。
- 自适应位置：OverlayTrigger会根据目标元素在视口中的位置动态调整工具提示的位置，确保工具提示始终可见。
OverlayTrigger的应用场景包括但不限于：
- 表单验证：可以在用户输入错误时，通过工具提示提示用户正确的输入格式或错误信息。
- 数据展示：在某些数据展示场景下，可以使用工具提示来提供更详细的信息，以帮助用户了解数据的含义。
- 按钮说明：可以通过工具提示为按钮提供额外的说明或提示，帮助用户了解按钮的功能。
腾讯云提供了与React Bootstrap相匹配的一系列云产品，可以用于支持React Bootstrap应用程序的部署和运行。其中，推荐的产品是腾讯云云服务器（CVM）和弹性伸缩（Auto Scaling），可以提供稳定可靠的服务器资源，并根据需求自动调整容量。您可以通过以下链接获取更多关于腾讯云云服务器和弹性伸缩的详细信息：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云弹性伸缩（Auto Scaling）：https://cloud.tencent.com/product/as
以上是对React Bootstrap中OverlayTrigger工具提示根据视口动态更改位置的完善且全面的答案。
相关·内容
已经向我的组件添加了工具提示和触发器，我如何让它触发工具提示？
所需的模块如下：
var Icon = require('./Icon'),
Tooltip = require('./Tooltip'),
Button = require('react-bootstrap').Button,
OverlayTrigger = require('react-bootstrap').OverlayTrigger;
getTooltip: function() {
return <Tooltip text="s
浏览 3提问于2015-10-08得票数 2
创建了用于显示问题的codesandbox：https://codesandbox.io/s/agitated-https-2xjs2?fontsize=14&hidenavigation=1&theme=dark 当我将鼠标悬停在卡片上时，我想要一个工具提示来显示。我需要从OverlayTrigger向工具提示组件传递一个值。使用以下代码，将鼠标悬停在卡片上时不会显示任何内容： Character.js： import React from 'react'
import { Card, OverlayTrigger } from 'react-boo
浏览 19提问于2020-11-08得票数 0
1回答
我这里有一段代码，当用户将鼠标悬停在td单元格上时，它会显示一个工具提示。
import { DropdownButton, Tooltip } from 'react-bootstrap';
...
$(e.currentTarget).parent().prev().hover(() => {
this.showTooltip(tooltipContent);
});
...
showTooltip(tooltipContent) {
console.log(tooltipContent);
return (
<T
浏览 1提问于2016-10-09得票数 5
我在模态文件中有这样的代码：
...
Icon = require 'components/shared/icon'
{ Checkbox, OverlayTrigger, Tooltip } = require 'react-bootstrap'
...
body: ->
...
<Checkbox
checked={ @state.myAttr }
onChange={ @onMyAttrChange }>
<OverlayTrigger placement='top' overlay={
浏览 5提问于2016-10-11得票数 4
回答已采纳
这是我的代码：我使用了
import React from "react"
import {OverlayTrigger, Tooltip} from "react-bootstrap"
import { HeaderPrintContainer, Button} from "../share/header-button-style"
这是工具提示中的值。
const tooltipLove = (
<Tooltip id="tooltipLove">
I Love You
</Tooltip&
浏览 0提问于2018-10-09得票数 2
回答已采纳
我使用了React Bootstrap 附带的"Tooltip“标签。代码运行良好。然而，当我的应用全屏显示时，我看不到工具提示了。我正在使用React和React Bootstrap。
这是使应用程序全屏显示的代码
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else i
浏览 18提问于2020-06-01得票数 0
回答已采纳
1回答
自举反应悬停效果
、、、、
编辑：
我正在尝试react-bootstrap，因为它也支持工具提示！但是我仍然不能得到想要的工具提示效果。按钮以正确的样式显示，但将鼠标悬停在按钮上时不会出现工具提示效果。
我的代码：
import { Tooltip, OverlayTrigger, Button } from 'react-bootstrap'
const tooltip = (
<Tooltip id="tooltip"><strong>Holy guacamole!</strong> Check this info.</
浏览 2提问于2017-10-11得票数 0
我不断地得到不变的违规，我真的不知道为什么.这肯定与OverlayTriggers有关。把他们排除在外的时候一切都很好。
导入：
import Col from 'react-bootstrap/lib/Col';
import Row from 'react-bootstrap/lib/Row';
import Tooltip from 'react-bootstrap/lib/Tooltip';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
应
浏览 3提问于2017-07-14得票数 24
回答已采纳
1回答
我有一个关于工具提示的问题，它不能显示在所有东西的顶部。我试图将z-index更改为一个非常高的数字，但这不起作用。
CSS：
a.tooltipA {
outline:none;
}
a.tooltipA strong {
line-height:30px;
}
a.tooltipA:hover {
text-decoration:none;
}
a.tooltipA span {
z-index:10;
display:none;
padding:14px 20px;
margin-top:-30px;
margin-left:28px;
width:300px;
line-heig
浏览 0提问于2015-04-20得票数 2
回答已采纳
在中，它们显示了一个具有多个工具提示的段落示例，但它们从不显示用于实现它的代码。但是，它们确实显示了执行单个硬编码工具提示的代码。
在这个例子中，我如何让一个超链接的单词在悬停时显示“hello”，另一个在悬停时显示“再见”？
import React from "react";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Tooltip from "react-bootstrap/Tooltip";
const renderTooltip = (
浏览 10提问于2021-02-19得票数 1
1回答
如何在React-Bootstrap中手动触发？
我尝试过此代码，但工具提示不显示：
const tooltip = (
<Tooltip id="tooltip">
<strong>Holy guacamole!</strong> Check this info.
</Tooltip>
);
<OverlayTrigger placement="left" overlay={tooltip} trigger="manual" show>
浏览 14提问于2018-01-30得票数 0
回答已采纳
嗨，在我的项目中，我使用的是引导5.2.1和Response-bootsrap2.5.0。我正在尝试使用工具提示与组件。但是当我悬停在警徽工具提示从页面溢出，滚动条被激活。然后它就自己修复了。但这会导致页面上的闪烁。我是不是遗漏了什么？这是组件
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/aj
浏览 3提问于2022-10-09得票数 0
1回答
我在这里重新创建了中的弹出窗口，跟着，弹出器出现了，但是滚动之后，指针不再与按钮对齐，我试图传递container道具，但仍然无法工作。我怎么才能解决这个问题？
再生产
复制行为的步骤：
单击按钮
弹出
在容器中滚动
Popover跟随滚动事件而不是元素。
可复制示例
App.js
import "./styles.css";
import {
Popover,
OverlayTrigger,
Button,
ButtonToolbar
} from "react-bootstrap";
import Reac
浏览 2提问于2021-11-07得票数 3
回答已采纳
我试图在一个格式化程序中使用react-bootstrap OverlayTrigger和工具提示，以便使用react引导表，并不断地获得以下错误：
OverlayTrigger唯一需要的支柱是overlay，它应该是一个节点，而工具提示唯一需要的支柱是id (尽管他们的例子中没有显示您需要一个ID)，但它需要是一个字符串。
"onlyChild必须通过一个只有一个孩子的孩子。“
相关代码如下：
import {Button, DropdownButton, MenuItem, Modal,
OverlayTrigger, Tooltip} from 'reac
浏览 3提问于2016-04-26得票数 5
我正在使用react引导版本0.32.4，我无法更新该版本，这将带来许多更改。
我想有一个工具提示信息显示在页面加载4秒，然后它应该隐藏，然后工具提示信息应该显示在悬停。
以下是代码：
import React from "react";
import "./styles.css";
import { Button, Tooltip, OverlayTrigger } from "react-bootstrap";
import { render } from "react-dom";
浏览 16提问于2022-04-29得票数 1
回答已采纳
1回答
我已经在我的反应应用程序中放置了工具提示，但没有一个工具提示显示。这是为什么？错在哪里？我会把密码贴在这里。
TooltipSpan.js
import React from 'react';
import { OverlayTrigger } from 'react-bootstrap';
const TooltipSpan = (props) => {
const { tooltip, className } = props;
return (
<OverlayTrigger placement="top" o
浏览 1提问于2020-04-23得票数 0
我正在使用react-bootstrap工具提示来构建一个react组件。根据react-boostrap规范，我需要用OverlayTrigger元素包装我的元素，如下所示：
<OverlayTrigger overlay={this.getTooltipElement()} placement='left'>
//element
</OverlayTrigger>
这可以很好地工作，但我的组件需要在悬停时显示工具提示(通常的行为)，并且仅当布尔变量设置为true时才显示工具提示。我试过了：
if (booleanParameter) {
浏览 0提问于2015-12-11得票数 1
我使用，在使用OverlayTrigger/Popover时遇到任何问题。当我关闭弹出并重新打开它时，<ComponentWithState />的状态将被丢弃。
。要复制:单击按钮，单击链接，注意文本如何从"State: Off“更改为"State: On”。关闭弹出(单击旁边或重新单击按钮)，然后再单击按钮打开弹出.注意文本是如何写"State: Off“的。国家没有坚持(没有说" state : On")。
你知道我怎样才能让状态在关闭/重新打开之间保持不变吗？
'use strict';
var React = re
浏览 0提问于2015-08-10得票数 1
回答已采纳
我正在使用react-bootstrap中的工具提示覆盖，但在StrictMode中不推荐使用findDOMNode错误。根据，使用overlaytrigger的函数形式可以避免React.findDOMNode调用，对于那些试图符合严格模式的人来说，但我仍然收到如下错误。
index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref direc
浏览 36提问于2020-11-14得票数 4
这里的情况很有趣。一个让我感到有点困惑的问题。我们在这个页面上有一个动态的水平图库列表，其中一个选项是当点击齿轮图标时弹出的操作菜单(下图)。然而，最后一个项目的弹出窗口是朝向屏幕边缘的，实际上是不可读的(边缘被切断，链接被断开到第二行)。我想选择最后一个div并更改弹出按钮的位置(如果是最后一个)，但是菜单是动态的，并且它已经与JS一起定位(附加了其他屏幕截图)。希望这是足够的信息。下面的代码片段。此菜单
还与表视图共享。谢谢
$galleryCont.on('mouseover','.galleryItem',function(
浏览 1提问于2016-03-31得票数 0
1回答
我现在使用的是React-Bootstrap，我想使用工具提示，但是我不想为工具提示创建两个函数。因此，我使用第二个参数来更改工具提示的文本。但是，我不能调用它，函数读到我在调用第一个参数，那么，如何让函数理解我在使用第二个参数呢？ //this is my custom tooltip function
function renderTooltip(props, text) {
return (
<Tooltip id="button-tooltip" {...props}>
{text}
</Tooltip>
浏览 35提问于2020-03-25得票数 0
出于性能原因，React-Bootstrap文档建议导入单个组件，而不是整个库。所以：
import Button from 'react-bootstrap/Button';
而不是
import { Button } from 'react-bootstrap';
我的问题是，在进口大量组件时，这是否有限制？即
import Alert from 'react-bootstrap/Alert';
import Row from 'react-bootstrap/Row';
import Col from 'react-
浏览 1提问于2022-05-21得票数 1
回答已采纳
1回答
我有一个绝对定位的工具提示元素，当点击时会弹出。但是，在某些情况下，此元素可能会走得太靠右，从而为页面添加水平滚动。我的想法是始终将其水平地保持在视口内。
就像你用的是Windows，在屏幕上的任何地方右击，就会弹出一个菜单。它通常显示在鼠标光标的右下角，但是如果此操作是在屏幕的右下角完成的，菜单就会出现在光标的左上角。
下面是一个JSFiddle示例：
HTML
<div class="view-port">
<div class="div-holder">
<div class="absolute
浏览 0提问于2014-05-11得票数 1
我正在尝试创建一个popover，但由react-bootstrap文档提供的popover示例不起作用。我试图做各种调整来解决，但被卡住了。 import React from "react"
import Popover from "react-bootstrap/Popover"
import OverlayTrigger from "react-bootstrap/OverlayTrigger"
import Button from "react-bootstrap/Button"
class PopoverExamp
浏览 20提问于2019-08-14得票数 1
回答已采纳
react-bootstrap覆盖触发器的文档说明覆盖属性可以是元素或文本。但是，每当我传递给它的东西不是“工具提示”组件时，它就不能工作。事实上，如果你在下面链接的网站上将他们的代码示例修改为一个div而不是一个工具提示或字符串，那么它在他们的网站上也不起作用。是否必须向其传递工具提示？
浏览 4提问于2017-07-22得票数 3
我希望在span或p标签上有一个工具提示，但对我来说，这只适用于Button标签。我使用的是插件SortableTree，但这并不重要：
<SortableTree
nodeContentRenderer={NodeRenderer}
treeData={treeDataFirst}
onMoveNode={() => this.test()}
onChange={(treeDataFirst) =>
浏览 1提问于2021-11-29得票数 0
我安装了以下软件包： npm install --save react-bootstrap bootstrap 我正在尝试使用一个提供的here示例添加一个弹出式窗口。 这是确切的代码： import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigg
浏览 21提问于2020-08-11得票数 2
当鼠标悬停在透视图中的单个按钮上时，是否可以添加覆盖？ ? 例如，当我将鼠标悬停在搜索图标上时，我想要显示“搜索”的覆盖文本。我尝试使用react-bootstrap中的OverlayTrigger，但如果PivotItem标记被包围，它将不会显示在透视中。我还尝试了PivotItem标记中的onMouseEnter函数，但它是在将鼠标移到此透视显示的组件上时调用的，而不是将鼠标移到透视中的图标上。 <Pivot>
<OverlayTrigger
placement={'bottom'}
overlay={
浏览 8提问于2020-04-17得票数 1
当您在div元素上悬停时，我试图实现一个非常简单的工具提示，但是工具提示显示的位置不正确。我试过很多没有运气的东西。-我使用的是react引导程序2.4.0。这是我的密码：
import { useEffect, useState } from "react";
import { Col, OverlayTrigger, Row, Tooltip } from "react-bootstrap";
import { GroupUserStatus } from "../utils/Constants";
function GroupUserCi
浏览 1提问于2022-08-10得票数 1
2回答
启用/禁用动态引导工具提示
、、、、
我想让工具提示为动态内容工作。但我也希望根据屏幕大小启用/禁用。
我想要发生的事情:如果屏幕小于768，我想禁用工具提示。如果屏幕大于768，我希望启用它。
到目前为止我有这样的想法：
function tooltip(){
if (window.innerWidth <= 768) {
$('[data-toggle="tooltip"]').tooltip("disable");
} else {
$('body').tooltip({
selector: '[data-tog
浏览 1提问于2019-03-12得票数 1
回答已采纳
1回答
我正在尝试一个简单的弹出窗口，并添加了一个关闭按钮，代码如下：
import React from 'react';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';
import Popover from 'react-bootstrap/Popover';
const popover = (
<Popover className="mt-2&#
浏览 3提问于2020-07-03得票数 0
2回答
有没有可能让一个元素具有固定的位置，但阻止它与页面一起滚动？
我的问题是:我正在构建一个工具提示，我会根据页面上的可用空间动态确定它的位置。它需要弹出到目标元素旁边的所有其他元素上，而不是占用空间。所以我最初认为位置是绝对的。
但绝对位置基于元素的父包装器。我的页面被包装在我无法控制的多个不同的包装器中(在Salesforce上，但这不一定是Salesforce特定的问题)。
因此，我需要将其放置在视口之外，而不是依赖于它最终被包装在哪个父对象中。所以定位是固定的，效果很好。
唯一的问题是位置固定，使元素与页面滚动。我真的不希望工具提示在用户滚动时跟随用户。
我觉得我需要保持基于视窗的位置，因
浏览 0提问于2018-10-17得票数 0
我正在使用react-bootstrap中的OverlayTrigger, Tooltip，并希望根据视口更改工具提示位置。我现在使用的是默认的placement，但是当我在iPhone X (375px)上测试它时，它不能工作，我想是因为没有足够的空间来渲染。如何在小屏幕上自动更新？ 对于LONGTextLon不起作用： const CustomTooltip = ({ placement = 'right', text = null }) => {
return (
<OverlayTrigger
placeme
浏览 35提问于2019-10-10得票数 0
4回答
我正在尝试在React Bootstrap中实现。
我使用以下代码实现了它：
var {Button, Overlay, OverlayTrigger, ButtonToolbar, Popover} = require('react-bootstrap');
...
<ButtonToolbar>
<OverlayTrigger trigger="click" placement="left" overlay={<Popover title="Popover left"><strong&g
浏览 11提问于2015-11-19得票数 3
回答已采纳
1回答
工具提示从屏幕上移出
、、、
我在一个容器中有这么多的工具提示，但是当我点击最右边和最左边的工具提示时，它们下面打开的模式就会从屏幕上消失。 我已经尝试过根据屏幕大小应用媒体查询，让它们向左或向右，但可以有任何工具提示。 那么，有没有人可以建议一些解决方案，如何检查哪种工具提示模式正在从屏幕中消失，并根据该模式向左或向右对齐
浏览 15提问于2019-03-23得票数 0
回答已采纳
1回答
为什么在下面的代码(示例)工具箱从页面中出来，它如何能够修复为自动(动态)的页，而不是从页面出来？
演示： (i mane是关于鼠标在其上显示提示框的how )参见图像：
$('li a').hover(function() {
var title = $(this).next('.tooltip').html();
var offset = $(this).offset();
$tooltip = $('<div />').addClass('show_tooltip').ht
浏览 2提问于2011-11-01得票数 0
2回答
我正尝试在bootstrap中设置我的旋转木马的高度。如果我将高度设置为700px，在响应中旋转木马看起来就像垃圾一样。那么，我如何解决这个问题，让我的旋转木马在桌面和智能手机上看起来很好呢？合适的高度应该是多少？
浏览 2提问于2015-09-30得票数 0
我有一个网站，这是动态的，使用bootstrap。我想创建一个动画到其中的动态缩略图在div class=“col 4”上点击缩放从那里的位置到100%的中心的容器。 我要创建一个点击效果来缩放图像，但不是从div的位置，而是从页面的中心。我正在尝试图像的定位。 x = document.getElementById("Image")
t = x.top;
l = x.left;
function hello() {
x.style.top = x.top + "px";
x.style.left = x.left + "px";
}
浏览 20提问于2019-03-19得票数 0
1回答
在我的react项目中，我尝试创建一个自适应图库，它在点击时也有一个灯箱，我试着使用react-lightbox-gallery，但它不太起作用，当我插入src时：“手动操作很好，当我试图推入一个对象数组并传递到他们没有出现的图片库组件时，它们出现的唯一方式就是手动传递第一个对象，然后再推送其他对象。”在这种情况下，如果我单击唯一呈现的一个，然后关闭lightbox，则会呈现另一个推送丢失的图像。
然后我尝试转换为simple-react-lightbox，它甚至不会出现在DOM中，它只是一个空的div。
UPDATE ：除非我更改视口大小.，否则组件不会加载
问题视频.
下面是代码：
im
浏览 4提问于2021-07-19得票数 0
我在整个站点上使用react-table很好，我尝试在popover中使用react-table --表已经显示，但是行的展开不起作用--同时检查DOM --展开单击正在发生，数据呈现了一小部分秒，然后就消失了。
import { OverlayTrigger, Popover } from 'react-bootstrap';
import ReactTable from 'react-table';
export const sampleTable = observer(class sampleTable extends React.Component {
浏览 17提问于2022-07-29得票数 1
2回答
我已经使用bootstrap为下拉控制创建了一个工具提示。它会显示工具提示。但是，由于此控件绑定在class="col-sm-4"内部，因此工具提示文本被换成新行。但我希望在一行中显示这一点。你有办法做这个吗？
<div class="col-sm-4">
<select class="form-control" id="ddlSchoolAttended" data-toggle="tooltip" data-placement="right" t
浏览 0提问于2014-09-14得票数 15
回答已采纳
CSS中有没有一种方法可以让字体大小根据屏幕缩放级别动态改变(调整)？
假设在普通显示器上我想使用16px字体。
但是当页面在HDTV中打开时，它是1080P屏幕，显示设置scale = 150%，我想字体变成，比如说12px？
这可行吗？我正在使用bootstrap，不确定这是否相关。
浏览 0提问于2018-11-16得票数 0
1回答
我试图设置这两个列的视口高度，但由于某些未知的原因，它不工作，因为结果是两个列具有相同的高度，虽然它不应该是相同的高度。供您参考，我在这里使用了React-bootstrap。我不确定这是不是我的错？无论如何，下面是供您参考的代码： import React from "react;
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col"
浏览 11提问于2020-10-03得票数 0
我刚刚创建了#element和#box，用于检测它是否在视口之外。如果是这样的话，它应该位于光标上方，但这是我的问题。当#box不在视野之外时，它就会一遍又一遍地闪烁，开始表现得很奇怪。希望你们能帮我。干杯。
var box = $("#box");
var element = $("#element");
var PAGEX;
var PAGEY;
var elementTop;
var elementBottom;
var windowHeight;
element.bind({
mousemove: function (e) {
box.show();
浏览 0提问于2018-05-05得票数 0
回答已采纳
1回答
我已经定义并创建了使用“反作用引导”的popover。
import { Popover, ButtonToolbar, OverlayTrigger, Button } from "react-bootstrap";
和
const popoverClick = (
<Popover id="popover-trigger-click" title="Popover bottom">
<strong>TODO: </strong> Plan Info...
</Popov
浏览 2提问于2018-02-14得票数 3
1回答
我创建了Event ()函数，它作为自定义组件传递给
<Calendar components = {{
event: Event
}}/>
然后，在Event ()函数中，我创建变量popoverClickRootClose，在其中放置react引导popover。然后，popoverClickRootClose传递给组件：
<OverlayTrigger overlay = {popoverClickRootClose}>
<div> {event.title}</ div>
</ OverlayTrigger>
浏览 2提问于2019-10-24得票数 1
回答已采纳
1回答
有一个类似的问题，但答案不是很清楚，我没有足够的“观点”来评论它。
我读过和其他一些文件，但找不到答案。
我使用本文作为我的指南：
import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';
.
.
.
render() {
const popover = (
浏览 2提问于2020-12-29得票数 0
我在玩React Bootstrap的OverlayTrigger，它要求传递的子组件能够接收ref (在docs：中说明)
我有以下工作代码：
const Acomponent = forwardRef((props, ref) => {
return (
<Button {...props} ref={ref}>
{props.children}
</Button>
);
});
const App = () => {
return (
<OverlayTrigger
key="
浏览 3提问于2022-01-16得票数 1
回答已采纳
在下面的示例中，div具有预定义的高度：300px。例如，可滚动下拉菜单的最后一个城市是Zimbawe，不会显示在iPhone 6屏幕上。
我想以这样的方式更改可滚动的dropdown div，使其不指定高度，并使div在屏幕结束的地方结束。
有什么想法吗？
我们用于下拉列表的库是：
你可以在这里看到下拉列表的默认高度非动态：
浏览 10提问于2018-11-26得票数 4
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
