如何显示 react-select 的工具提示？

Question

我需要在反应选择容器中显示工具提示（而不是单独的选项），使用 react-tooltip 图书馆。

我自己做的 SelectContainer 的组件，并在原组件的基础上增加了 data-tip 和 data-for HTML属性。工具提示显示出来了，但是当我改变选定的值时，它就消失了，不再显示。

这是我的代码。

const getSelectContainer = options => props => {
  return (
    <components.SelectContainer
      {...props}
      innerProps={{
        ...props.innerProps, ...{
          'data-tip': options.tooltipText,
          'data-for': options.tooltipId,
        }
      }}
    />
  )
}

const CustomSelect = (props) => {
  const tooltipId='tooltip_id'
  const tooltipText='tooltip'
  const selectedOption = colourOptions.filter(option => option.value === props.value)

  return (
    <div>
      <ReactTooltip effect="solid" html={true} place="bottom" id={tooltipId} />
      <Select
        defaultValue={colourOptions[4]}
        value={selectedOption}
        options={colourOptions}
        classNamePrefix="react-select"
        onChange={item => props.onChange(item.value)}
        className="my-select"
        components={{
          SelectContainer: getSelectContainer({
            tooltipText:tooltipText,
            tooltipId:tooltipId
          })
        }}
      />
    </div>
  )
}

class Page extends Component {
  constructor (props) {
    super(props)
    this.state = {
      selectValue: 'red'
    }
  }
  render () {
    const onChange = (value)=> {
      this.setState({selectValue: value})
      //alert(value)
    }
    return (
      <CustomSelect
        value={this.state.selectValue}
        onChange={onChange}>
      </CustomSelect>
    )
  }
}

查看全文 例子:

如果我包 Select 与其他 <div> 并给它分配工具提示的HTML属性，一切都能正常工作，但我不想为此增加一个移动DOM元素。

怎样才能在改变选择后显示工具提示？

Answer 1

当状态发生变化时，尝试重建react-tooltip。

useEffect(() => {
    ReactTooltip.rebuild();
}, [state]);