React 中的 onHover 按钮闪烁

如何解决React 中的 onHover 按钮闪烁

我有 2 个组件“TableCard”和“TableGrouping”。我在“TableCard”中有一个名为“Grouping”的组件。

当我用鼠标悬停按钮时，它在我的屏幕上闪烁/闪烁。这两个组件被分成两个文件，因为我需要修改“TableCard”中“TableGrouping”的内容（当我直接将分组内容放入“TableGrouping”时，它工作正常，但这不是我的目标。

这是我的代码：

export function TableGrouping(props) {
  return (
    <div className="form">
      <div className="row align-items-center form-group-actions margin-top-20 margin-bottom-20">
        <div className="col-xl-12">
          <div className="form-group form-group-inline">
            <div className="form-label form-label-no-wrap">
              {props.children}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export function TableCard() {
  const Grouping = () => {
    function BtnSupprimer(props) {
      return <Button>test</Button>;
    }

    return (
      <>
        <BtnSupprimer/>
      </>
    );
  };
return (
   <TableGrouping>
     <Grouping />
   </TableGrouping>
  );
}

链接：here

你们中的一些人有想法吗？谢谢:)