我想將 HTMLDivElement 作為 React 孩子傳遞。 那不可能嗎？

Question

語境

我正在構建一個 React 應用程序（rails-react），其中我有一個包含一些子組件的父組件GameTracker ； 即EquipmentPanel和PinnedPanels 。 我在父組件中添加了一個pinned-panels-container div，當我單擊“pin”按鈕時，我想從EquipmentPanel移動面板。

        <div id='container'>

          <EquipmentPanel pinPanel={this.pinPanel}/>

          <div id='tracker-contents'>
            {this.state.pinnedPanels.length > 0 && 
           <div id='pinned-panels-container'>
              <h2>Pinned Panels</h2>
                {this.state.pinnedPanels}
           </div>}

          </div>
        </div>

方法

我計划這樣做的方法是在父組件GameTracker中創建一個pinPanel()函數，並將其作為道具傳遞給它的子組件EquipmentPanel 。 然后孩子添加按鈕，並調用pinPanel(div) ，其中div是我要固定的特定 div/面板。

pinPanel(panel) {
    let newPanel = panel.current.cloneNode(true)

    var parser = new DOMParser();
    var htmlDoc = parser.parseFromString(newPanel.innerHTML, 'text/html');
    newPanel = htmlDoc
    
    let newPinnedPanels = this.state.pinnedPanels

    newPinnedPanels.push(newPanel)
   
    this.setState({
      pinnedPanels: newPinnedPanels
    })
   
  }

錯誤

現在，每當我固定一個面板時，React 都會給我：

Uncaught Error: Objects are not valid as a React child (found: [object HTMLDocument]). 
If you meant to render a collection of children, use an array instead.

如果我按照錯誤消息的建議嘗試使用數組，則會收到相同的錯誤。 如果我不使用DOMParser() （我在此處找到），我會得到相同的錯誤，但有以下區別： found: [object HTMLDivElement] 。

我的問題是，React 中是否有任何方法可以克隆 div 及其所有內容，通過狀態將其傳遞給另一個組件，並將其呈現在另一個不是其父或子的組件中？ 我基本上想復制/粘貼一個div。

編輯：如果我嘗試通過.innerHTML分配它，最終結果是一個面板，其中[object HTMLDocument]作為一個字符串。

Answer 1

不確定這是否被認為是一個正確的答案，但我使它與 DOM 操作一起工作。 感覺很hacky，但它有效。 如果有人有任何見解，當然歡迎。

let newPanel = panel.current.cloneNode(true)

    if (this.pinnedPanelsRef.current.innerHTML.includes(newPanel.children[0].innerHTML)) {
      this.pinnedPanelsRef.current.innerHTML = this.pinnedPanelsRef.current.innerHTML.replace(newPanel.children[0].innerHTML, "")

    }
    else {
      this.pinnedPanelsRef.current.innerHTML += newPanel.children[0].innerHTML
    }

我仍然覺得有一個更優雅的解決方案我無法達到。