Question

所有

我是React的新手，我尝试构建的是对SVG元素悬停的工具提示响应，例如，我构建一个STATELESS组件，如：

(props) =>{
var data = props.data;
return (
    <g>
        {
            data.map((d, si) => {
                var logoTrans = "translate(10,"+ si*20+")";
                return (
                    <g transform={logoTrans} key={si}>
                        <rect x="20" y="12"></rect>
                    </g>
                )
            })
        }
    </g>

    <g>
        {
            data.map((d, si) => {
                var logoTrans = "translate(10,"+ si*20+")";
                return (
                    <g transform={logoTrans} key={si}>
                        <text>{d}</text>
                    </g>
                )
            })
        }
    </g>
    )
}

我想要做的是将每个<rect>悬停，然后根据<text>显示（使用相同的si，原始文本display:none）

Answer 1

我只是开源react-svg-tooltip，希望能满足您的要求。

它允许通过引用将SVG工具提示链接到任意SVG元素，即，如果rect和text处于并行级别组中，则无关紧要。

所有鼠标悬停逻辑都在幕后处理。此外，库确保您的工具提示始终呈现在顶部（通过使用React门户）。

如何在React无状态组件中实现工具提示

1 个答案: