javascript - 警告 findDomNode
问题描述
我试图用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 添加到要引用的元素。
我该如何解决?
解决方案
菜单中的 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;