背背不背

Question

我有以下代码，其中父组件上的更改会导致子元素重新呈现。基本上，菜单组件应该通过右键单击占位符标签顶部出现，但是当它出现时，整个父组件会闪烁。我使用Usecallback却没有运气。我试过useMemo，但它不接受任何论点。由于我的回调函数是由事件触发的，因此传递事件的目标非常重要。因此，我应该通过这个论点。我很感激任何建议。

const [menu, setMenu] = useState({isActive: false, position: undefined});

    <div className='placeholder'
        onClick={clickHandler}
        onContextMenu={rightClickHandler}>
        {menu.isActive && <Menu menu={menu} />}
        {[props.entity].map(plc => {
            let Content = place[props.entity];
            if(Content) {
                return <Content key={Math.random()} />
            }
        })}
    </div>

    const rightClickHandler = useCallback((e) => {
        e.preventDefault();
        const parentPosition = e.target.getBoundingClientRect();
        const position = {
            left: e.clientX - parentPosition.left,
            top: e.clientY - parentPosition.top
        };
        setMenu(
            {
                isActive: (menu.isActive ? menu.isActive: !menu.isActive),
                position: {
                    left: position.left,
                    top: position.top
                }
            }
        );
    }, []);

    const clickHandler = useCallback((e) => {
        setMenu({isActive: false, module: '', position: undefined});
    }, []);

Answer 1

如果使用这种方式，则不需要useCallback。我希望这能解决问题。

const rightClickHandler = (e) => {
  e.preventDefault()
  const parentPosition = e.target.getBoundingClientRect()
  const position = {
    left: e.clientX - parentPosition.left,
    top: e.clientY - parentPosition.top,
  }
  setMenu((menu) => {
    return {
      isActive: menu.isActive ? menu.isActive : !menu.isActive,
      position,
    }
  })
}