使用 react-draggable 有条件地渲染 <Draggable> 内的组件会破坏可拖动功能。有任何想法吗？

Question

我正在尝试有条件地在另一个使用 react-draggable 的组件中渲染一个组件。如果我的 return 函数 return 是 div，拖动效果很好。如果我的函数 returns SomeComponent，拖动完全中断。我已经尝试 React.forwardRef 并将 ref 附加到 Draggable 上的 nodeRef 以及组件内的 ref 上，但这不起作用。这可能是 react-draggable 的限制吗？

const Master = () => {
  const nodeRef = useRef(null);

  const renderComponent = (type) => {
    switch (type) {
      case "typography":
        // If we return <Typography />, drag stops working.
        // return <Typography content="Hello!" ref={nodeRef} />; // Not Working
        return <div ref={nodeRef}>hello</div>; // Working
      case "button":
        return <button>Click Me</button>;
      default:
        break;
    }
  };
  return (
    <Draggable nodeRef={nodeRef}>{renderComponent("typography")}</Draggable>
  );
};

const Typography = React.forwardRef(({ content }, ref) => {
  return <div ref={ref}>{content}</div>;
});

这里有一个 link 到一个分叉的 codesandbox，如果你想查看的话。 https://codesandbox.io/s/gallant-voice-ly8jyj?file=/src/Master.js:113-673

谢谢大家！

Answer 1

将 renderComponent 调用包装在 div 中似乎可以解决问题：

const Master = () => {
  const nodeRef = useRef(null);

  const renderComponent = (type) => {
    switch (type) {
      case "typography":
        return <Typography content="Hello!" />;
      case "button":
        return <button>Click Me</button>;
      default:
        break;
    }
  };
  return (
    <Draggable nodeRef={nodeRef}>
      <div ref={nodeRef}>{renderComponent("typography")}</div>
    </Draggable>
  );
};

在这种情况下，您也不需要 forwardRef

使用 react-draggable 有条件地渲染 <Draggable> 内的组件会破坏可拖动功能。有任何想法吗？

Conditionally rendering a component inside of <Draggable>, using react-draggable, is breaking the draggable functionality. Any ideas?

reactjs

drag-and-drop

ref

conditional-rendering

react-forwardref