导入 Bootstrap 和 Jquery 后，编译时显示此错误。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';

global.jQuery = require('jquery');
require('bootstrap');

我在 React 中构建了一个自定义树视图，每个项目都包含一个使用 Popper 定位的下拉列表。由于子元素在渲染时不可见，因此 Popper 未正确定位下拉列表，例如：

当树在安装时打开（即子级可见）时，定位是正确的：

树中的每个级别都通过一个CategoryNavItem组件呈现，其本质上如下所示：

<div className={ className.join(' ') }>
    <div className={ `collection-nav_item-link depth${depth}` } style={{ paddingLeft: `${paddingLeft}px`}}>
        <Link to={ linkTo } onClick={() => { setIsOpen(!isOpen) }}>
            <i className="collection-nav_item-link_icon"></i>
            <span className="collection-nav_item-link_text">{ category.name }</span>
        </Link>

        <Dropdown
            toggleClassName="btn-icon-white btn-sm"
            toggleContent={ <Icon name="ellipsis-h" />}
            position="bottom-end"
            size="small"
            items={[ 
                { text: 'Edit category' },
                { text: 'Add subcategory', onClick: (() => { dispatch(openAddSubcategory(category)) }) }
            ]} />
    </div>
    { children }
</div>

该Dropdown组件是我们使用 Popper 的地方，它在其他地方也能正常工作。a 的可见性CategoryNavItem …

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

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

我尝试将其放入代码框中，然后 console.log the styles.arrow 并看到它正在打印：

{position: "absolute", top: "", left: "0", transform: "translate3d(50px, 0px, 0)"}

因此，我将此代码添加到我的应用程序中，该代码位于打字稿中，如下所示：

 const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);
  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);
  const [arrowElement, setArrowElement] = useState<HTMLElement | null>(null);
  const { styles, attributes } = usePopper(referenceElement, popperElement, {
    modifiers: [
      {
        name: 'arrow',
        options: {
          element: arrowElement,
        },
      },
    ],
  });

但是，当我在这里 console.log styles.arrow 时，它返回未定义。我感觉这里有什么问题。我声明有什么错误吗？

当我npm update为现有的 React 项目放置命令时，会显示：

npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

我正在开发日历应用程序。

问题：单击弹出器的弹出器会关闭两个弹出器，因为它会触发第一个弹出器的单击外部事件，从而关闭它。

我有一个<Event />使用 Material-UI React 的组件<Popper />，并且它可以很好地工作。将其与<AwayClickListener />单击外侧时关闭，单击弹出器内部时保持打开状态。我创建了<Events />一个<Event />.

当单击+更多文本时，包含当天所有事件的弹出窗口应该出现在单元格顶部。

波普孩子们也是<Events />：

单击某个事件应打开一个包含事件详细信息的弹出窗口，就像在单元格中单击它一样。由于我使用相同的组件<Events />，它确实做到了这一点，但并不完全符合预期：

单击事件详细信息弹出窗口将关闭两个弹出窗口。

这就是问题所在：要求是单击弹出窗口的外侧将关闭弹出窗口，但单击内部将使它们打开并交互

调试显示，单击第二个弹出器会触发第一个弹出器的外部单击事件，从而将其关闭。另外，从第一个弹出器中取出点击离开侦听器功能，使第二个弹出器在大多数点击中保持打开状态 - 单击其中的某些位置，会触发它的点击离开功能，从而将其关闭。例如：单击标题将其关闭，单击位置或摘要 div 则不会。

1. 我尝试用 包裹整个单元格<ClickAwayListener />。
2. 我尝试用以下方法包裹波普尔的孩子们<ClickAwayListener />
3. 尝试使用material-ui-popup-state npm，并给出了popper id属性。比点击离开时，将目标 ID 与“popper”进行比较，如果相等则保持打开状态。但是，从 onClickAway 事件的事件对象中提取的 id 是空字符串。即使点击弹出按钮时也是如此。

代码

<Popper>- 材质 ui popper 的服装包装

const popper = ({
  placement,
  open,
  anchorEl,
  handleClickAway=null,
  title,
  handleCloseClick=null,
  children,
  popperStyle = {},
  calendarPopoverClass = ''
}) => …

我正在学习使用此命令安装 popper: 的教程 npm install popper --save。但是当我尝试它时收到此错误消息：致命错误 - 检测到 cygheap base mismatch - 0x13A1410/0x13D1410

所以我搜索找到这个库的github页面并找到了这个页面：https : //github.com/FezVrasta/popper.js但我看到它建议使用这个命令来安装它：npm install popper.js --save它与我的教程不同。现在我想知道这些对图书馆有什么不同吗？如果它们不同，那么poppenot的 github 页面popper.js是什么？

我还必须提到，我没有说 python popper 库。我想要 .js 使用的 javascript 版本bootstrap4。

我正在使用React-popper单击按钮后，显示日期选择器元素。

JSX

<Manager>
    <Reference>
        {({ ref }) => (
            <button ref={ref} onClick={this.onDateRangeBtnClick}>click to show</button>
        )}
    </Reference>
    {ReactDOM.createPortal(
        <Popper placement="auto-end" >
            {({ ref, style, placement, arrowProps, scheduleUpdate }) => (
                <div className={`dayPickerOverlay ${this.state.showDatePicker ? "" : "hidden"}`} ref={ref} style={style} data-placement={placement}>
                    <DateRangePicker />
                </div>
            )}
        </Popper>,
        document.querySelector('#root')
    )}
</Manager>

onDateRangeBtnClick单击按钮后调用when ，我想通过调用重新定位 Popper 元素scheduleUpdate方法，但我不知道如何处理。

我如何公开scheduleUpdate要在 JSX 内部onDateRangeBtnClick调用的特定函数，或者如何有条件地调用scheduleUpdateJSX 本身内的函数（就此而言）？