具有直接子级的组件的 CSSTransition nodeRef答案

【问题标题】：CSSTransition nodeRef for component with direct children具有直接子级的组件的 CSSTransition nodeRef
【发布时间】：2020-11-18 19:43:12
【问题描述】：

我想在使用react-transition-group 时摆脱StrictMode 上的findDOMNode 警告，但我偶然发现了一个问题。

我的<Slide> 组件如下所示：

class Slide extends React.Component {
  nodeRef = React.createRef();

  render() {
    return (
      <CSSTransition
        in={this.props.in}
        timeout={ANIMATION_DURATION}
        mountOnEnter={true}
        unmountOnExit={true}
        classNames={{
          enter: "slideEnter",
          enterActive: "slideEnterActive",
          exit: "slideExit",
          exitActive: "slideExitActive"
        }}
        nodeRef={this.nodeRef}
      >
        {this.props.children}
      </CSSTransition>
    );
  }
}

它接收一个Drawer 元素作为子元素，Drawer 组件如下所示：

class Drawer extends React.Component {
  render() {
    return (
      <div className="drawer">
        <button onClick={this.props.onClose}>close me</button>{" "}
        <div>This is my drawer</div>
      </div>
    );
  }
}

我不能用 HTML 标记包装 children 元素（附加引用 <div ref={this.nodeRef}>{this.props.children}</div>，因为它会破坏内容的动画。（我将其用于具有绝对位置的不同抽屉的孩子）

我也尝试过使用cloneElement，但它仍然不起作用（使用下面的代码，它的行为如下：1.in没有动画，2.out没有动画，3.@987654334 @ 动画有效，但我收到警告 findDOMNode 所以似乎 nodeRef 被发送为 null, 4. out 动画不起作用。

const onlyChild = React.Children.only(this.props.children);
const childWithRef = React.cloneElement(onlyChild, {
  ref: this.nodeRef;
});

这种情况有什么解决办法吗？谢谢！

【问题讨论】：

您可以尝试设置ref: this.nodeRef 吗？如果解决了它，我会写一个解释它的答案。
如果我这样使用它，我会收到错误Uncaught TypeError: Cannot read property 'baseVal' of undefined at hasClass (hasClass.js?1d84:3) at addClass (addClass.js?0d03:3) at eval (CSSTransition.js?e9c9:13) at Array.forEach (<anonymous>) at addClass (CSSTransition.js?e9c9:12) at CSSTransition.addClass (CSSTransition.js?e9c9:237) at Object.CSSTransition._this.onEnter (CSSTransition.js?e9c9:117) at Transition.performEnter (Transition.js?9b73:262) at Transition.updateStatus (Transition.js?9b73:228) at Transition.componentDidUpdate
我可以在我的示例中做到这一点。你能在 CodeSandbox 中重现你的问题吗？只是您所处情况的一个小版本。
我对您的问题进行了一些编辑以包含相关信息（正在审核中）。我还建议你编辑你的问题说ref: this.nodeRef，这样我的回答就不必解决两个问题，只解决核心问题。
是的，听起来有问题，我希望你能找到比参考钻孔更简单的方法？？？？如果您需要更多帮助，请在 Twitter 上告诉我。

标签： reactjs react-transition-group reactcsstransitiongroup

【解决方案1】：

问题在于nodeRef 需要指向一个DOM 节点，顾名思义，在您的情况下，它指向Drawer 类的一个实例。你有两个选择：

通过另一个道具传递参考，例如forwardedRef，并在 Drawer 类中将该属性传递给根元素：

React.cloneElement(onlyChild, {
  forwardedRef: this.nodeRef,
})

<div ref={this.props.forwardedRef} className="drawer">

将Drawer转换为函数组件并使用React.forwardRef：

const Drawer = React.forwardRef((props, ref) => {
  return (
    <div ref={ref} className="drawer">
      <button onClick={props.onClose}>close me</button>{" "}
      <div>This is my drawer</div>
    </div>
  );
});

【讨论】：