Reactstrap Tooltip初始化报错：目标'TooltipExample'未在DOM中找到

我之前也踩过这个坑！问题根源在组件挂载的时机上：当你把tooltipOpen初始设为true时，Reactstrap的Tooltip组件会在组件还没完全渲染到真实DOM的阶段，就尝试查找目标元素TooltipExample，但这时候对应的<a>标签还没被挂载到页面上，自然找不到，就抛出了那个报错。

这里有两种靠谱的解决方式，根据你的组件类型选择就行：

类组件方案：用componentDidMount延迟开启Tooltip #

componentDidMount是React类组件的生命周期钩子，它会在组件及其所有子元素都完全渲染到真实DOM之后才执行，这时候目标元素肯定已经存在了。代码调整如下：

constructor(props) {
  super(props);
  this.state = { tooltipOpen: false }; // 初始先设为关闭状态
  this.toggle = this.toggle.bind(this);
}

componentDidMount() {
  // 组件挂载完成后，再打开Tooltip
  this.setState({ tooltipOpen: true });
}

toggle() {
  this.setState(prevState => ({
    tooltipOpen: !prevState.tooltipOpen
  }));
}

render() {
  return (
    <div>
      <p>Somewhere in here is a <a href="#" id="TooltipExample">tooltip</a>.</p>
      <Tooltip 
        placement="right" 
        isOpen={this.state.tooltipOpen} 
        target="TooltipExample" 
        toggle={this.toggle}
      >
        Hello world!
      </Tooltip>
    </div>
  );
}

函数组件方案：用useEffect钩子 #

如果你后续改成函数组件开发，用useEffect配合空依赖数组，效果和componentDidMount一致，只会在组件挂载后执行一次：

import { useState, useEffect } from 'react';
import { Tooltip } from 'reactstrap';

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

  const toggle = () => setTooltipOpen(!tooltipOpen);

  useEffect(() => {
    // 挂载后开启Tooltip
    setTooltipOpen(true);
  }, []); // 空数组确保只执行一次

  return (
    <div>
      <p>Somewhere in here is a <a href="#" id="TooltipExample">tooltip</a>.</p>
      <Tooltip 
        placement="right" 
        isOpen={tooltipOpen} 
        target="TooltipExample" 
        toggle={toggle}
      >
        Hello world!
      </Tooltip>
    </div>
  );
}

核心思路就是：别让Tooltip在DOM还没准备好的时候就去查找目标元素，等组件完全挂载到页面后再开启它，就能完美解决这个报错啦！

内容的提问来源于stack exchange，提问作者Poogy