在React里怎么实现像vue里@click.stop的效果？

React中，要阻止一个事件冒泡（类似于 Vue 中的 @click.stop），我们可以调用事件对象的 stopPropagation() 方法。通常，这会在事件处理器中进行。

下面是一个示例，演示如何在React中阻止事件冒泡：

import React from 'react';

function MyComponent() {
  const handleClick = (event) => {
    event.stopPropagation();
    console.log('按钮点击，事件不会冒泡！');
  };

  return (
    <div onClick={() => console.log('父级 div 的点击事件')}>
      <button onClick={handleClick}>点击我，不冒泡</button>
    </div>
  );
}

export default MyComponent;

再比如：

 <MaskOver closeDaig={closeDaigHandle}>
            <div onClick={e=>e.stopPropagation()} >
               {props.children}
            </div>
               
          </MaskOver>

这个例子中，点击按钮时 handleClick 函数会被调用。event.stopPropagation() 会阻止这个点击事件冒泡到外部的 <div> 元素。因此，尽管 <div> 元素也有一个点击事件处理器，点击按钮时，只会有 handleClick 函数内部的 console.log 输出，而 <div> 元素的事件处理器不会被触发。

在React中，还可以阻止默认事件行为，即如果你想阻止默认行为（例如，提交表单时阻止页面刷新），可以调用 preventDefault 方法：

const handleSubmit = (event) => {
  event.preventDefault();
  console.log('提交事件，页面不会刷新！');
};

综合来看，React的事件处理有足够的灵活性来实现Vue中 @click.stop 或其他类似的自定义事件处理模式。通过适当地调用 stopPropagation() 和 preventDefault() 方法，你可以控制事件的冒泡和默认行为。