如何通過按鍵在 React 中掛載/卸載組件？

Question

我正在制作一個在鍵盤按下時呈現 3d 對象的應用程序。 我希望這些對象在 2-3 秒后消失，或者在 animation 播放完畢后消失。

這是一個處理按鍵邏輯的組件：

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 />之間切換。 但是，如果我向某個鍵發送垃圾郵件，它只會在初始按鍵時呈現組件。 我希望它在每次我擊鍵時重新渲染並重新啟動組件上的 animation，即使它一遍又一遍地重復。 我假設我需要一種方法來卸載然后在每次擊鍵時重新安裝組件？

我正在使用 Three 和 React Spring 來處理我的動畫。

Answer 1

當 props 或 state 發生更改時，組件將重新渲染。 當您向按鈕發送垃圾郵件時，會設置相同的 state，但不會更改，因此不會發生任何事情。 因此，您需要的是在每次按下時翻轉並傳遞給孩子的另一個參數（強制他們重新渲染）。

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 <></>;
  }
};