css - 除了 id 之外，ReactStrap 中工具提示的可能目标是什么？

Question

<div>
  <p>Somewhere in here is a <span style={{textDecoration: "underline", color:"blue"}} 
        href="#" id="TooltipExample">tooltip</span>.</p>
  <Tooltip placement="right" isOpen={tooltipOpen} target="TooltipExample" toggle={toggle}>
       Hello world!
  </Tooltip>
</div>

此工具提示针对 ID 为“TooltipExample”的范围。除了 id 之外，还有哪些其他可能的目标？我正在使用 React 的 BootstrapTable，它不支持 id 属性。

我想要下面代码的工具提示。

<TableHeaderColumn dataField="associateName" dataSort={true} id="TooltipExample">
                   Name
</TableHeaderColumn>

但 id 不起作用，因为我猜 TableHeaderColumn 没有任何 id 属性。

Answer 1

根据documentation ，目标也可以是一个DOMElement(可以从React中的refs获得):

Tooltip.propTypes = {
  ...
  target:  PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.func,
    DOMElement, // instanceof Element (https://developer.mozilla.org/en-US/docs/Web/API/Element)
  ]).isRequired,
  ...
}

例子:

const MyComponent = () => {
  const ref = React.createRef();

  return (
    <>
      <div ref={ref}>This will trigger a tooltip</div>
      <UncontrolledTooltip
        placement='top'
        target={ref}>
        I'm a tooltip!
      </UncontrolledTooltip>
    </>
  );
};

看起来有一个 bug尽管在 Reactstrap 的 v8 中有 ref 目标，所以你可能必须使用较早的版本，直到它被修复。

或者，您不能在 TableHeaderColumn 周围添加一个带有 id 和目标的包装器元素吗？