使用多个工具提示进行反作用

Question

我有以下内容：

<Col sm="12" md="4">
<FormGroup>
<Label for="exampleText">
Vendor Name*{" "}
<FontAwesomeIcon
id="TooltipExample"
icon={faInfoCircle}
color={"blue"}
/>
</Label>
<Tooltip
placement="right"
isOpen={tooltipOpen}
target="TooltipExample"
toggle={toggle}
>
Please make sure that the name filled in is same as Bank Account
name. If the names are different, please input reason under
'Notes'.
</Tooltip>
<Input
innerRef={register({ required: true })}
type="input"
name="name"
disabled={!accountEditMode}
/>
{errors.vendorName && <div className={"text-danger"}>Required</div>}
</FormGroup>
</Col>
<Col sm="12" md="4">
<FormGroup>
<Label>
Address Line 1{" "}
<FontAwesomeIcon
id="tooltipAddress1"
icon={faInfoCircle}
color={"blue"}
/>
</Label>
<Tooltip
placement="right"
isOpen={tooltipOpen}
target="tooltipAddress1"
toggle={toggle}
>
Please make sure that the name filled in is same as Bank Account
name. If the names are different, please input reason under
'Notes'.
</Tooltip>
<Input
maxLength="50"
innerRef={register({ required: true })}
type="input"
name="address1"
disabled={!accountEditMode}
/>
</FormGroup>
</Col>

上面的问题是，每次我悬停一个工具提示时，它们都会被打开，因为它们共享同一个钩子(tooltipOpen(。然而，我不想在我的工具提示中有56个不同的钩子。关于如何做到这一点，有什么建议吗？不可能是真的，每个工具提示都需要一个钩子。

Answer 1

您可以包装工具提示组件。

function MyToolTip () {
const [tooltipOpen, setTooltipOpen] = useState(false)
return (
<Tooltip
placement="right"
isOpen={tooltipOpen}
target="TooltipExample"
toggle={() => setTooltipOpen(!tooltipOpen)}
>
)
}