reactjs 有三个子组件abc当操作a时b和c不可见操作b时a和c不可见操作c时a和b不可见。

可以通过在父组件中设置一个状态来控制子组件的可见性。根据不同的操作，更新这个状态来显示或隐藏对应的子组件。

以下是一个示例代码：

import React, { useState } from 'react';

const ParentComponent = () => {
  const [visibleComponent, setVisibleComponent] = useState(null);

  const handleComponentClick = (component) => {
    setVisibleComponent(component);
  };

  return (
    <div>
      <button onClick={() => handleComponentClick('a')}>操作a</button>
      <button onClick={() => handleComponentClick('b')}>操作b</button>
      <button onClick={() => handleComponentClick('c')}>操作c</button>

      {visibleComponent === 'a' && <ComponentA />}
      {visibleComponent === 'b' && <ComponentB />}
      {visibleComponent === 'c' && <ComponentC />}
    </div>
  );
};

const ComponentA = () => {
  return <div>Component A</div>;
};

const ComponentB = () => {
  return <div>Component B</div>;
};

const ComponentC = () => {
  return <div>Component C</div>;
};

export default ParentComponent;

在上述代码中，通过useState来创建了一个状态visibleComponent，初始值为null。每个按钮点击时，调用handleComponentClick函数来更新visibleComponent的值，从而控制子组件的可见性。

子组件的显示或隐藏通过条件渲染实现，根据visibleComponent的值来判断哪个子组件应该显示