3

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

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

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

我曾想过使用门户将 box[0] 移植到 box[1] 的 id 等等。所以对于长度为 2 的框，我想制作一个 DOM 结构，例如，

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

但是，当我尝试使用反应门户呈现一个 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()))}
})}

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

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

难道我做错了什么？如果是这样，我怎样才能在我的代码中实现类似的行为？

提前致谢。

4

1 回答 1

1

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

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

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

希望能帮助到你。回复任何疑问/澄清。

于 2020-05-10T18:06:25.733 回答