react 打开父组件不让子组件触发

你可以在父组件中使用一个状态变量来控制子组件是否能够触发，例如可以定义一个名为 `disableChild` 的状态变量，当这个状态变量为 `true` 时，子组件的事件处理函数不会被触发，反之则会触发。在父组件中，你可以通过修改 `disableChild` 状态变量的值来控制子组件的触发。

以下是一个示例代码：

import React, { useState } from 'react';

function ParentComponent() {
  const [disableChild, setDisableChild] = useState(false);

  function handleParentClick() {
    // 点击父组件时，禁用子组件触发
    setDisableChild(true);
  }

  return (
    <div onClick={handleParentClick}>
      <ChildComponent disabled={disableChild} />
    </div>
  );
}

function ChildComponent(props) {
  function handleChildClick() {
    console.log('Child component clicked');
  }

  // 如果 disabled 为 true，则禁用子组件的点击事件
  if (props.disabled) {
    return <div style={{ pointerEvents: 'none' }}>Child component</div>;
  }

  return <div onClick={handleChildClick}>Child component</div>;
}

在上面的示例中，`ParentComponent` 组件中定义了一个 `disableChild` 状态变量，初始值为 `false`，表示子组件可以触发。当父组件被点击时，会调用 `handleParentClick` 函数，将 `disableChild` 的值设为 `true`，表示子组件不可以触发。在 `ChildComponent` 组件中，根据 `props.disabled` 的值来判断是否禁用子组件的点击事件。如果 `props.disabled` 为 `true`，则通过样式 `pointerEvents: 'none'` 来禁用子组件的点击事件。如果 `props.disabled` 为 `false`，则正常触发子组件的点击事件。这样就可以实现在父组件打开时禁用子组件的点击事件。