ReactStrap中工具提示除id以外可能的目标是什么？

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外，还有哪些其他可能的目标。我正在使用Reacts的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>
    </>
  );
};

虽然看起来像在Reactstrap的v8中有一个带有引用目标的bug，所以您可能必须使用更早的版本，直到此问题得到解决。

或者，您是否不能在TableHeaderColumn周围添加具有ID并以其为目标的包装元素？