Javascript 如何为<；使用z索引；g>；Svg中使用React state的元素？

我正在使用React学习Svg。我有表单输入，它将的订单号输入到中。我的意思是，用户将在我的表单输入中输入一个数字，我将根据该数字对包含元素的进行排序。我尝试将索引作为一种风格，但它不起作用。我以前研究过SVG不支持z-index。在这种情况下我该怎么办？你有什么建议给我吗？顺便说一下，我在SVG内部使用g，因为我将使用它进行拖放

我使用以下代码调用我的组件：

                     <div ref={takeRef} className="center"> 
                                <svg>
                                    {state.dragFrames.map((d, i) => (
                                        <Frame
                                            key={d.id}
                                            data={d}
                                            onDrag={onDrag}
                                            onDragStop={onDragStop}
                                        />
                                    ))}
                                </svg>
                        </div>

{state.dragFrames.map（（d，i）=>(
))}

我的框架组件：

import React, { useEffect, useState} from "react";
import { DraggableCore } from "react-draggable";

const Frame = React.memo(function Frame(props: any) {
 const render = () => {
        const { z,width,height } = props.data;
      
        return (
            <DraggableCore  onStart={onStart} onDrag={onDraggingFrame} onStop={onDragStop}>

                <g  className="confine"  style={{zIndex:z}} >

                    <rect
                        cursor="grab"
                        width={width}
                        height={height}
                    >

                    </rect>
                </g>
            </DraggableCore>
        )
    }

    return (
        <>
            {render()}
        </>
    )
}
)
export default Frame;

import React，{useffect，useState}来自“React”；
从“react draggable”导入{DraggableCore}；
const Frame=React.memo（功能框架（道具：任意）{
常量渲染=（）=>{
常数{z，宽度，高度}=props.data；
返回(
)
}
返回(
{render（）}
)
}
)
导出默认帧；

将所有元素按您希望的顺序显示，即DOM中的后续元素将在早期元素的基础上绘制。我知道可以设置顺序索引号。我正在寻找另一个解决方案，因为我没有更改阵列@RobertLongsony您可以隐藏所有元素并通过显示它们，但仍然需要对元素进行排序。画师的模型是SVG中的全部。请看一下这支笔：他正在使用

appendChild

将元素追加到文档末尾