reactjs - 反应过渡组和 nodeRef

Question

在我当前的项目中，我想使用和创建一个Popper组件。react-popperreact-transition-group

但是，据我了解，当您StrictMode在 React 中使用时，react-transition-group需要一个nodeRef道具。

以下是我当前Fade使用的组件nodeRef：

<CSSTransition
  classNames="rp-fade"
  in={inProp}
  mountOnEnter
  nodeRef={nodeRef}
  timeout={250}
  unmountOnExit
>
  {(_: any, childProps: Record<string, unknown>) => {
    return React.cloneElement(children, {
      ...childProps,
      ref: nodeRef,
    })
  }}
</CSSTransition>

但是，当我使用react-popper时，我需要向refpopper 元素提供一个，但问题是这个引用被nodeRef传递给子元素覆盖：

return React.cloneElement(children, {
      ...childProps,
      ref: nodeRef,
    })

下面是我的 popper 组件：

<Fade in={open}>
  <div
    className="rp-popper"
    {/* This ref is overwritten by the nodeRef */}
    ref={popperRef}
    style={styles.popper}
    {...attributes.popper}
  >
    {children}
  </div>
</Fade>

那么，我怎样才能让用户在不破坏动画的情况下提供自己的参考呢？

标签： reactjsreact-transition-group