reactjs - 我可以使用 React Portal 将元素移植到任何 DOM 节点吗？

Question

我想循环一堆自定义元素并赋予它们父子关系。所以 arr[0] 将是 arr[1] 的子级，而 arr[1] 将是 arr[2] 的子级...

以下方法添加<WrapperDraggable/>元素到盒子数组。

addElement=(count,zIdx) => {
    var newDom = <WrapperDraggable count={count} id={"portal"+count.toString()}
                  zIdx={zIdx} width={count*175} height={count*175}/>
    this.setState({boxes:this.state.boxes.concat(newDom)})
}

我想到使用门户将boxes[0]移植到boxes[1]的id等等。因此，对于长度为 2 的盒子，我想制作一个 DOM 结构，例如，

<div id="portal3"/>
    <WrapperDraggable id="portal2"/>
        <WrapperDraggable id="portal1"/>

但是，当我尝试使用 React Portal 渲染一个 div 并将其附加到另一个 ID 为“portal”的 div 时，

<div id={"portal"+(this.state.boxes.length)}>
{this.state.boxes.map((box,index)=>{
    {ReactDOM.createPortal(box, document.getElementById("portal"+(this.state.boxes.length-index).toString()))}
})}

为了简单起见，假设盒子数组已经是相反的顺序。

我没有将任何内容附加到最外面的门户 div 上。控制台也没有给我任何错误消息。

我做错了什么吗？如果是这样，我如何在我的代码中实现类似的行为？

提前致谢。

Answer 1

问题似乎出在 map 功能上。您不会从该函数返回任何内容。

正确返回，应该可以正常工作。

{this.state.boxes.map((box,index)=>{
    return ReactDOM.createPortal(  //Return here
        box,
        document.getElementById("portal"+(this.state.boxes.length-index).toString())
    )
)}

希望有帮助。如有任何疑问/澄清，请回复。