ReactJS:在父组件的子组件中禁用鼠标事件

import React, { useState } from 'react';

function ParentComponent() {
  const [disableMouseEvents, setDisableMouseEvents] = useState(false);

  return (
    <div>
      <ChildComponent disableMouseEvents={disableMouseEvents} />
      <button onClick={() => setDisableMouseEvents(!disableMouseEvents)}>
        {disableMouseEvents ? '启用鼠标事件' : '禁用鼠标事件'}
      </button>
    </div>
  );
}

import React from 'react';

function ChildComponent({ disableMouseEvents }) {
  const handleMouseClick = () => {
    if (disableMouseEvents) {
      return; // 如果禁用鼠标事件，则不执行任何操作
    }

    // 处理鼠标点击事件的逻辑
  };

  return (
    <div onClick={handleMouseClick}>
      子组件
    </div>
  );
}