如何在React無狀態組件中實現工具提示

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門戶）。