Question

我遵循了有关tooltips 的代码示例在Reactstrap：

constructor(props) {
  super(props);
  this.state = {
    tooltipOpen: true
  };
}
.
.
.
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>
  ) 
}

我收到以下错误：

错误：无法在dom中识别目标'TooltipExample'，提示：检查拼写

如果初始状态为tooltipOpen: false，则一切正常。但是我想在用户加载页面时显示工具提示...

我该怎么办？

Answer 1

在构造函数中，tooltipOpen应为false。

然后，在componentDidMount中，将工具提示从false切换到true

这是代码：

constructor(props) {
  super(props);
  this.state = {
    tooltipOpen: false,
  };
}

componentDidMount() {
  this.setState({
    tooltipOpen: true,
  });
}

Answer 2

我也遇到了同样的问题，问题是初始值，如果您将false设置为初始值，则初始值必须为true，弹出框会寻找target元素尚无法渲染，因此，如果要在组件渲染时打开弹出窗口，请更新componentDidMount挂钩中的状态。

/* initial value must be false */
state = { isPopoverOpen: false };

componentDidMount() {
  this.setState({
    isPopoverOpen: true,
  });
}

Answer 3

由于引入了 React Hooks，可以使用以下方法避免此错误。

measure_vars_wide = list(gdppc = paste0('gdppc_', times[-3]),
                         lifexp = paste0('lifexp_', times))

melt(DT,
     idvars = 'country',
     measure = measure_vars_wide,
     variable.name = 'year')
#    country   year    gdppc   lifexp
#     <char> <fctr>    <num>    <num>
# 1:      c1      1 121782.3 54.45299
# 2:      c2      1 126794.4 93.59589
# 3:      c3      1 150476.8 92.96538
# 4:      c1      2 118858.7 88.84380
# 5:      c2      2 143942.9 77.99588
# 6:      c3      2 166981.9 96.46525
# 7:      c1      3       NA 81.63469
# 8:      c2      3       NA 90.62213
# 9:      c3      3       NA 63.07867

这也适用于 import React, { useRef } from 'react' import { UncontrolledTooltip } from 'reactstrap' const ToolTipExample = () => { const ref = useRef(null) return ( <div > <p ref={ref}>Hello World</p> <UncontrolledTooltip target={ref}> Tooltip message goes here :D </UncontrolledTooltip> </div> ) } 组件。

Reactstrap工具提示会导致错误：无法在dom中识别目标“TooltipExample”

3 个答案: