在父组件的 DOM 层级之外插入组件 onClick 的新实例

Question

我想在每次用户点击时创建一个新组件（<CreateLine/>），而不是更新现有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")

)

}}

// 第二次更新仍然无法正常工作。显示 N 行，但具有相同的选项 (type,title,line,color and data)。我怎样才能解决这个问题:)

      const [numberofLines, setnumberofLines] = useState([0]); 
    

        <AddCircleSharpIcon onClick={ () => {
        
      setnumberofLines([...numberofLines, numberofLines.length])

}}
function LineComponent() {

  return (

    <React.Fragment>

      {numberofLines.map( (si) => (

           <CreateLine
   type={type} title={title} line={line}
    color={color}
    data={[...data]} 
    />,
            
      )) }

</React.Fragment> 
  )
}

// 使用 useEffect 因为 im 运行 nextJs SSR.

useEffect( () => {

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

}, [numberofLines])

Answer 1

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

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"))

在父组件的 DOM 层级之外插入组件 onClick 的新实例

Insert a new instance of a component onClick outside DOM hierarchy of the parent component

reactjs

react-dom