const setActive = (flag) => {
  setActiveColor(flag ? "active": "");
};

您可以将活动设置为：

setActive(true);

或不活动的：

setActive(false);

您可以在您的class中拥有一个状态变量，并且根据您的点击，您可以更改该变量以添加或删除class

class Demo{
  constructor(){
    this.state={addClass:true}
  }
  render(){ 
    return({
        this.state.addClass?<div className="some-class">With class</div>
       :<div>Without class</div>
    })
  }
}

// Or
 class Demo{
  constructor(){
    this.state={addClass:true}
  }
  render(){ 
    return(
        <div className={this.state.addClass?"some-name":null}>Lorem</div>
    )
  }
}

一种方法可能是将 activeStateColor 移动到父级。

然后，当您单击 setActive 时，您将密钥作为参考传递。

export const Shape = ({ text, k, active, setActiveColor }) => {
  const [state, setState] = useState({ visible: false });

  const showModal = k => {
    setState({
      visible: true
    });
    setActiveColor(k);
  };

  const handleOk = e => {
    console.log(e);
    setState({
      visible: false
    });
  };

  const handleCancel = e => {
    setActiveColor("");

    console.log(e);
    setState({
      visible: false
    });
  };
  const setActive = k => {
    setActiveColor(k);
  };
  return (
    <div>
      <div>
        <Button type="primary" onClick={() => showModal(k)}>
          Open Modal
        </Button>
        <Modal
          title="Basic Modal"
          visible={state.visible}
          onOk={handleOk}
          onCancel={handleCancel}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </div>

      <div>
        <div
          k={k}
          className={active === k ? "active" : ""}
          style={{ border: "1px solid" }}
          onClick={() => setActive(k)}
        > 
          {text}
        </div>
      </div>
    </div>
  );
};