javascript - 如何显示 react 选择的工具提示？

Question

我需要使用 react-tooltip 显示 react-select 容器的工具提示(不是单独的选项)图书馆。
我自己制作了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>
    )
  }
}

查看全文 example here :
如果我包装 Select与另一个 <div>并为其分配工具提示 HTML 属性，一切正常，但我不想为此再添加一个 DOM 元素。
更改选择后如何显示工具提示？

Answer 1

当状态改变时，尝试重建 react-tooltip。

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