我有两个组件{addressone}，{addresstwo} 并希望在 {addressone} 组件内单击按钮时添加和删除 {addresstwo}

Question

解决两个组件

 `<AddressTwo/>`

我已经应用了切换逻辑，但我正在尝试添加和删除组件

  <Button
    onClick={()=>setIsToggled(!isToggled)}>+</Button>

    {isToggled && <AddressTwo/>}

单击时添加

   `<Button >+</Button>`

单击此按钮时删除组件

  ` <Button>-</Button>`

Answer 1

改变你的做事方式，

认为地址是接收 1 个对象的一个​​组件

{ id: Number, street: String, number: String, postCode: String }

并且地址的数量是一个对象数组

[ {...}, {...}]

在反应中，以这种方式管理可能更容易

const [addresses, setAdresses] = useState([])

const addOne = () => setAddresses([...addresses, { id: null, street: "", number: "", postCode: "" }]

{...}

return(
  <>
    <h1>hello from profile</h1>
    <button onclick={()=>addOne()}/>+</button>
    {addresses.map((address, i)=>(
       <AddressComponent address={address} />
    )}
  </>
)

代码并不完美，但你得到了 IDEA

然后从那里，您可以随心所欲地使用数组......（pop，push，limit，find等......）

勇气...