带有多个工具提示的 Reactstrap

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

您可以包装您的 Tooltip 组件。

function MyToolTip () {
  const [tooltipOpen, setTooltipOpen] = useState(false)

  return (
    <Tooltip
      placement="right"
      isOpen={tooltipOpen}
      target="TooltipExample"
      toggle={() => setTooltipOpen(!tooltipOpen)}
    >
  )
}