反应工具提示，工具提示移动到下一个组件，为组件提供两个工具提示

Question

我有多个图标，每个图标都有独特的工具提示建议。这些图标会随时间而变化，因此需要更新生成的工具提示。但是，当图标更改时，几乎就像工具提示找不到图标一样，因此锁定到最近的图标，以便它可以存在于某个地方。结果是 1 个图标有 2 个工具提示，另一个图标没有工具提示。这是我的反应代码

答案状态图标.js

import React, { useEffect, useState } from 'react'
import * as Icon from 'react-feather'
import ReactTooltip from 'react-tooltip'
function answered(){
return(
<div className="mx-auto">
<Icon.Check
className="w-5 h-5 text-theme-9 mx-auto"
data-for="1"
data-tip=""
/>
<ReactTooltip place="left" id="1">
Question is answered
</ReactTooltip>
</div>
)
}
function notAnswered(){
return(
<div className="mx-auto">
<Icon.AlertTriangle
className="w-5 h-5 text-theme-12 mx-auto"
data-for="2"
data-tip=""
/>
<ReactTooltip place="left" id="2">
Question was skipped
</ReactTooltip>
</div>
)
}
function marked() {
return(
<div className="mx-auto">
<Icon.Crosshair
className="w-5 h-5 text-theme-11 mx-auto"
data-for="3"
data-tip=""
/>
<ReactTooltip place="left" id="3">
Question was NOT answered and marked for review
</ReactTooltip>
</div>
)
}
function answeredAndMarked() {
return(
<div className="mx-auto">
<Icon.UserCheck
className="w-5 h-5 text-theme-9 mx-auto"
data-for="4"
data-tip=""
/>
<ReactTooltip place="left" id="4">
Question was answered AND marked for review
</ReactTooltip>
</div>
)
}
function notVisited() {
return( 
<div className="mx-auto">
<Icon.AlertCircle
className="w-5 h-5 text-gray-600 mx-auto"
data-for="5"
data-tip=""
/>
<ReactTooltip place="left" id="5">
Haven't visited question yet
</ReactTooltip>
</div>
)
}
function defaultStatus() {
return(
<div className="mx-auto">
<Icon.AlertCircle
className="w-5 h-5 text-gray-600 mx-auto"
data-for="6"
data-tip=""
/>
<ReactTooltip place="left" id="6">
Haven't visited question yet
</ReactTooltip>
</div>
)
}
function AnswerStatusIcon(props) {
if (props.answer && props.marked.includes(props.questionId)) {
return answeredAndMarked()
} else if (props.answer) {
return answered()
} else if (props.visited && props.marked.includes(props.questionId)) {
return marked()
} else if (props.visited && props.currentQuestion === props.questionId) {
return notVisited()
}
return defaultStatus
}

export { AnswerStatusIcon }

问题按钮.js

import React, { useState, useEffect, useRef } from 'react'
import { AnswerStatusIcon } from './AnswerStatusIcons'
function QuestionButton(props) {
const didMountRef = useRef(false);
const [visited, setVisited] = useState(false)
useEffect(() => {
if (didMountRef.current) {
if (props.currentQuestion === props.questionId) {
setVisited(true)
}
} else didMountRef.current = true;
}, [props.currentQuestion, props.questionId, visited])
return (
<div
style={{ cursor: 'pointer' }}
onClick={() => props.onClickQuestion(props.questionId)}
className={
'border text-gray-700 py-1 p-3 rounded relative font-medium mx-2' +
(props.currentQuestion === props.questionId
? ' border-gray-700 bg-gray-200 text-gray-600'
: ' border-gray-400')
}
>
{props.questionId + 1}
<AnswerStatusIcon
answer={props.answer}
marked={props.markedQuestions}
questionId={props.questionId}
visited={visited}
/>
</div>
)
}
export { QuestionButton }

Answer 1

这里真正的答案是改用@reach/工具提示库，我在 2 分钟内让它工作......