javascript - 如何使用 z-index使用 React 状态的 Svg 中的元素？

Question

我正在使用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>

我的框架组件：

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;

标签： javascriptreactjssvg