我可以使用 React 门户将元素移植到任何 DOM 节点吗？

Question

我想遍历一堆自定义元素并赋予它们 parent 到 child 的关系。所以 arr[0] 将是 arr[1] 的 child，这将是 arr[2] 的 child ...

以下方法将 <WrapperDraggable/> 个元素添加到 boxes 数组。

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 门户渲染一个 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()))}
})}

为简单起见，假设 boxes 数组已经倒序。

最外层的门户 div 没有任何附件。控制台也没有给我任何错误信息。

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

提前致谢。

Answer 1

问题似乎出在地图功能上。您没有从该函数返回任何内容。

Return 正确，应该可以正常工作。

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

希望对您有所帮助。还原任何 doubts/clarifications.

我可以使用 React 门户将元素移植到任何 DOM 节点吗？

Can I port an element to any DOM node using react portals?

reactjs

react-portal