javascript - 警告 findDomNode

Question

我试图用 material-ui 和 React 制作一个选择菜单

const SelectLevelButton = forwardRef((props, ref) => {
  const [stateLevel, setStateLevel] = useState({
    level: "Easy"
  });

  const [stateMenu, setStateMenu] = useState({
    isOpen: false
  });

  const openMenuHandler = () => {
    setStateMenu({
      isOpen: true
    });
  };

  const closeMenuHandler = () => {
    setStateMenu({
      isOpen: false
    });
  };

  const buttonRef = useRef();

  console.log(buttonRef.current);

  return (
    <>
      <Menu open={stateMenu.isOpen} anchorEl={buttonRef.current} onClose={closeMenuHandler}>
        <MenuItem>Easy</MenuItem>
        <MenuItem>Normal</MenuItem>
        <MenuItem>Hard</MenuItem>
      </Menu>
      <div ref={buttonRef}>
        <Button onClick={openMenuHandler} color="inherit">{`Level: ${stateLevel.level}`}</Button>
      </div>
    </>
  );
});

export default SelectLevelButton;

但是当我点击按钮在控制台中打开菜单时，我收到了这个警告:
警告:在 StrictMode 中不推荐使用 findDOMNode。 findDOMNode 传递了一个位于 StrictMode 内的 Transition 实例。相反，直接向要引用的元素添加 ref。

我怎样才能解决这个问题？

Answer 1

菜单中的 anchorEl 引用是未定义的，正如您从 buttonRef.current 获取它时未定义的一样。所以它使用 findDOMNode 代替。
在打开菜单之前，请参阅 Material-UI 文档如何获取引用。

您需要像这样更改代码(未测试):

const SelectLevelButton = forwardRef((props, ref) => {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const [stateLevel, setStateLevel] = useState({
    level: "Easy"
  });

  const [stateMenu, setStateMenu] = useState({
    isOpen: false
  });

  const openMenuHandler = event => {
    setAnchorEl(event.currentTarget);
    setStateMenu({
      isOpen: true
    });
  };

  const closeMenuHandler = () => {
    setStateMenu({
      isOpen: false
    });
  };

  const buttonRef = useRef(); // No need for that

  console.log(buttonRef.current);

  return (
    <>
      <Menu open={stateMenu.isOpen} anchorEl={anchorEl} onClose={closeMenuHandler}>
        <MenuItem>Easy</MenuItem>
        <MenuItem>Normal</MenuItem>
        <MenuItem>Hard</MenuItem>
      </Menu>
      <div ref={buttonRef}>
        <Button onClick={openMenuHandler} color="inherit">{`Level: ${stateLevel.level}`}</Button>
      </div>
    </>
  );
});

export default SelectLevelButton;