实现Checkbox的单选效果、Radio.Group单选框组的联动及取消效果

在React中，实现Checkbox的单选效果可以通过维护一个状态来判断是否选中，而实现Radio.Group的联动及取消效果，则可以通过监听变化并更新状态。

以下是实现Checkbox单选效果和Radio.Group联动的简单示例代码：

import React, { useState } from 'react';
import { Checkbox, Radio } from 'antd';
 
const CheckboxGroup = () => {
  const [checkedValue, setCheckedValue] = useState(null);
 
  const onChange = (e) => {
    const value = e.target.value;
    // 当只允许选中一个时，其他的checkbox都会被取消选中
    setCheckedValue(value);
  };
 
  return (
    <div>
      <Checkbox value="option1" checkedValue={checkedValue} onChange={onChange}>Option 1</Checkbox>
      <Checkbox value="option2" checkedValue={checkedValue} onChange={onChange}>Option 2</Checkbox>
      <Checkbox value="option3" checkedValue={checkedValue} onChange={onChange}>Option 3</Checkbox>
    </div>
  );
};
 
const App = () => {
  const [radioValue, setRadioValue] = useState(null);
 
  const onRadioChange = (e) => {
    setRadioValue(e.target.value);
  };
 
  return (
    <div>
      <Radio.Group value={radioValue} onChange={onRadioChange}>
        <Radio value="option1">Option 1</Radio>
        <Radio value="option2">Option 2</Radio>
        <Radio value="option3">Option 3</Radio>
      </Radio.Group>
      <CheckboxGroup />
    </div>
  );
};
 
export default App;

在这个例子中，CheckboxGroup组件维护了一个状态checkedValue，它代表当前选中的Checkbox的值。当用户点击Checkbox时，onChange回调会被触发，并更新checkedValue状态为当前选中的值，实现了单选效果。

App组件中包含了Radio.Group，当用户在Radio.Group中选择一个选项时，onRadioChange会更新radioValue状态，使得CheckboxGroup只有在对应的Radio.Group选项被选中时才允许选中其内部的Checkbox。这样就实现了Checkbox与Radio.Group的联动效果。