React实现点击AddressOne内按钮添加/删除AddressTwo组件的方法

你原来的toggle逻辑是通过状态取反实现单按钮切换，现在只需要把两个按钮的点击逻辑拆分为独立的状态赋值，不需要修改原有条件渲染的核心逻辑即可实现需求：

• 保留控制组件显隐的布尔类型状态，默认值设为false（即初始不渲染AddressTwo组件）
• 给+按钮绑定事件：点击时直接将状态设为true，触发AddressTwo组件挂载
• 给-按钮绑定事件：点击时直接将状态设为false，触发AddressTwo组件卸载

完整可运行代码示例 #

import { useState } from 'react';
import { Button } from '你项目里的Button组件引入路径';
import AddressTwo from '你项目里的AddressTwo组件引入路径';

const AddressOne = () => {
  // 控制AddressTwo挂载状态：false=卸载，true=挂载
  const [isAddressTwoMounted, setIsAddressTwoMounted] = useState(false);

  return (
    <div className="address-container">
      {/* 此处放置AddressOne组件的其他原有业务内容 */}

      {/* 新增组件按钮 */}
      <Button onClick={() => setIsAddressTwoMounted(true)}>+</Button>
      {/* 移除组件按钮 */}
      <Button onClick={() => setIsAddressTwoMounted(false)}>-</Button>

      {/* 条件渲染：状态为true时挂载AddressTwo，为false时自动卸载 */}
      {isAddressTwoMounted && <AddressTwo />}
    </div>
  );
};

export default AddressOne;

说明：React会自动对相同的state值做比对，重复点击+按钮不会触发重复挂载，重复点击-按钮也不会导致报错，不需要额外加冗余判断。如果后续需要支持添加多个AddressTwo组件，只需要把布尔状态改为数组类型，通过数组方法控制组件列表的增删即可。

内容的提问来源于stack exchange，提问作者DhunganaSushant