我如何 mount/unmount React 中的一个组件通过按键？

Question

我正在制作一个在键盘按下时呈现 3d 对象的应用程序。我希望这些对象在 2-3 秒后或动画播放完毕后消失。

这是一个处理按键逻辑的组件：

const Selector = () => {
  const [selector, setSelector] = useState(null);
  useEffect(() => {
    function setupKeyLogger() {
      document.onkeydown = function (e) {
        console.log(e);
        switch (e.keyCode) {
          case 65:
            setSelector('SpinningCube');
            break;
          case 83:
            setSelector('SmallCube');
            break;
          default:
            break;
        }
      };
    }
    setupKeyLogger();
  });
  switch (selector) {
    case 'SpinningCube':
      return (
        <>
          <SpinningCube />
        </>
      );
    case 'SmallCube':
      return (
        <>
          <SmallCube />
        </>
      );
    default:
      return <></>;
  }
};

现在，当我按下两个不同的键时，它正在两个对象 <SpinningCube /> 和 <SmallCube /> 之间切换。但是，如果我向一个键发送垃圾邮件，它只会在初始按键时呈现该组件。我希望它在我每次按下键时重新渲染并重新启动组件上的动画，即使它一遍又一遍地相同。我假设我需要一种方法来卸载然后在每次击键时重新安装组件？

我正在使用 Three 和 React Spring 来处理我的动画。

Answer 1

组件将 re-render 当道具或状态发生变化时。当您向按钮发送垃圾邮件时，会设置相同的状态，但不会更改，因此什么也不会发生。因此，您需要的是另一个参数，用于在每次按下时翻转并传递给 children（强制它们为 re-render）。

const Selector = () => {
  const [selector, setSelector] = useState(null);
  const [forceRender, setForceRender] = useState(0);
  const forceAnimation = (selected) => {
    setSelector(selected);
    setForceRender(++forceRender);
  };

  useEffect(() => {
    function setupKeyLogger() {
      document.onkeydown = function (e) {
        console.log(e);
        switch (e.keyCode) {
          case 65:
            forceAnimation('SpinningCube');
            break;
          case 83:
            forceAnimation('SmallCube');
            break;
          default:
            break;
        }
      };
    }
    setupKeyLogger();
  });

  switch (selector) {
    case 'SpinningCube':
      return (
        <key={forceRender}> // if this doesn't work, I'd try passing it to a React.Fragment or div instead
          <SpinningCube />
        </>
      );
    case 'SmallCube':
      return (
        <key={forceRender}>
          <SmallCube />
        </>
      );
    default:
      return <></>;
  }
};

我如何 mount/unmount React 中的一个组件通过按键？

How do I mount/unmount a component in React with a keystroke?

javascript

three.js

reactjs

react-spring

react-three-fiber