如何在按钮单击时添加组件答案

【问题标题】：how to add component on button click in react如何在按钮单击时添加组件
【发布时间】：2022-09-30 23:01:53
【问题描述】：

您好，我想在按钮单击时向 dom 添加一个反应组件。在这里，我有一个简单的功能。

const addCargo = () => {
        const parentElement = document.getElementById(\"addCargoContainer\");
        parentElement.insertBefore(<Cargo />, parentElement.children[2]);
    }

但这给了我以下错误：

Uncaught TypeError: Failed to execute \'insertBefore\' on \'Node\': parameter 1 is not of type \'Node\'.

有没有可能的方法来做到这一点？

您可能想要设置状态。
const {cargos, setCargos} = useState([<Cargo />]) const addCargo = () => { setCargos([...cargos, <Cargo />]) } 好吧，我试过了，但似乎也没有用

标签： javascript reactjs

【解决方案1】：

这样的事情会起作用吗？

function Cargo() {
  return <div>cargo</div>
}

function Ship() {
  const [cargos, setCargos] = useState([])

  const handleAddCargo = () => {
    const newCargo = Date.now()
    setCargos(v => [...v, newCargo])
  }

  return (
    <>
      <h1>ship</h1>
      <button onClick={handleAddCargo}>add cargo</button>
      {cargos.map(() => <Cargo />)}
    </>
  )
}

【讨论】：