Reactjs 在父组件的DOM层次结构之外单击一次，插入组件的新实例

我希望在用户每次单击时创建一个新组件（

），而不是更新现有DOM节点中的底层元素

// onClick to create a separate instance of the CreateLine Component and insert it to the Create Area as a Child. 


    <AddCircleSharpIcon onClick={ () => {
    
        ReactDOM.render( 
    
   <CreateLine
   type={type} title={title} line={line}
    color={color}
    data={[...data]} 
    />,
    
document.getElementById("CreateArea")

)

}} 

//使用useEffect因为我正在运行nextJs SSR

useEffect( () => {

ReactDOM.render(<LineComponent />, document.getElementById("CreateArea"))

}, [numberofLines])

useffect（（）=>{
ReactDOM.render（，document.getElementById（“CreateArea”））
}，[numberofLines]）

每次单击按钮时，都可以使用以下代码添加新行。这是一个模拟代码，因此您可以填充剩余的部分

function LineComponent() {
  const [numberOfLines, setNumberOfLines] = useState([]);
  const addNewLine = () => {
    setNumberOfLines(prevLines => ([
      ...prevLines,
      {
        ...newData // add your new data here
      }
    ]))
  }
  return (
    <React.Fragment>
      <AddCircleSharpIcon onClick={addNewLine}
      {numberOfLines.map(line => (
        <CreateLine key={line.id} type={line.type} title={line.title} line={line} color={line.color} data={line.data} />
      ))}
    </React.Fragment> 
  )
}

ReactDOM.render(<LineComponent />, document.getElementById("CreateArea"))

函数LineComponent（）{
常量[numberOfLines，setNumberOfLines]=useState（[]）；
const addNewLine=（）=>{
setNumberOfLines（prevLines=>([
…前几行，
{
…newData//在此处添加新数据
}
]))
}
返回(
(
))}
)
}
ReactDOM.render（，document.getElementById（“CreateArea”））

通常，如果您想在树的根目录之外安装组件，则首选门户。如果父组件靠近“添加”按钮，则可以维护一个组件数组，并向其中添加/删除元素。我确实想到了一个要循环的组件数组，但我不确定实现方法。我想尝试一下：）您可以使用具有某种id和所需数据（可能是一些标签或其他）的项创建一个数组，然后每当单击“添加”按钮时，只需添加具有新的唯一id和数据的新项。移除正好相反+1我认为我的问题是，它正在替换“CreateArea”div中的基础现有元素。您在错误的位置执行此操作。只能使用ReactDOM.render一次，并使用

useState

而不是useRef。更改useRef不会触发useffect钩子。我很快就能完成它。我认为剩下的“部分”是设置setnumberofLines状态对象以包括每一行的选项？是 啊您可以将对象添加到写入新数据的位置。@Ibra如果它回答了您的问题，请将其标记为接受答案。

function LineComponent() {
  const [numberOfLines, setNumberOfLines] = useState([]);
  const addNewLine = () => {
    setNumberOfLines(prevLines => ([
      ...prevLines,
      {
        ...newData // add your new data here
      }
    ]))
  }
  return (
    <React.Fragment>
      <AddCircleSharpIcon onClick={addNewLine}
      {numberOfLines.map(line => (
        <CreateLine key={line.id} type={line.type} title={line.title} line={line} color={line.color} data={line.data} />
      ))}
    </React.Fragment> 
  )
}

ReactDOM.render(<LineComponent />, document.getElementById("CreateArea"))