如何一次在一个组件上设置活动状态，并在React中删除所有其他组件的活动状态？

在React中，可以通过使用状态管理来实现一次在一个组件上设置活动状态，并删除其他组件的活动状态。以下是一种实现方式：

首先，在父组件中定义一个状态变量，用于记录当前活动组件的ID。可以使用useState钩子函数来创建状态变量，并初始化为null。

import React, { useState } from 'react';

function ParentComponent() {
  const [activeComponent, setActiveComponent] = useState(null);

  // ...
}

在子组件中，添加一个点击事件处理函数，用于设置当前组件为活动状态。在该函数中，调用父组件传递的回调函数，将当前组件的ID作为参数传递给父组件。

function ChildComponent({ id, setActiveComponent }) {
  const handleClick = () => {
    setActiveComponent(id);
  };

  // ...

  return (
    <div onClick={handleClick}>
      {/* 子组件内容 */}
    </div>
  );
}

在父组件中，将子组件渲染为一个列表，并传递回调函数和组件ID作为props。

function ParentComponent() {
  const [activeComponent, setActiveComponent] = useState(null);

  const handleSetActiveComponent = (id) => {
    setActiveComponent(id);
  };

  const components = [
    { id: 1, name: 'Component 1' },
    { id: 2, name: 'Component 2' },
    { id: 3, name: 'Component 3' },
    // ...
  ];

  return (
    <div>
      {components.map((component) => (
        <ChildComponent
          key={component.id}
          id={component.id}
          setActiveComponent={handleSetActiveComponent}
        />
      ))}
    </div>
  );
}

在父组件中，使用条件渲染来根据活动组件的ID显示或隐藏其他组件的活动状态。可以使用三元表达式来判断组件是否处于活动状态。

function ParentComponent() {
  const [activeComponent, setActiveComponent] = useState(null);

  const handleSetActiveComponent = (id) => {
    setActiveComponent(id);
  };

  const components = [
    { id: 1, name: 'Component 1' },
    { id: 2, name: 'Component 2' },
    { id: 3, name: 'Component 3' },
    // ...
  ];

  return (
    <div>
      {components.map((component) => (
        <ChildComponent
          key={component.id}
          id={component.id}
          setActiveComponent={handleSetActiveComponent}
        />
      ))}
      {components.map((component) => (
        <div
          key={component.id}
          style={{ display: activeComponent === component.id ? 'block' : 'none' }}
        >
          {/* 显示活动组件的内容 */}
        </div>
      ))}
    </div>
  );
}

通过以上步骤，我们可以实现在React中一次设置一个组件的活动状态，并删除其他组件的活动状态。