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

Question

我需要使用react-tooltip库显示 react-select 容器的工具提示（而不是单独的选项）。

SelectContainer我在原始组件的基础上制作了自己的组件，data-tip并在那里添加了data-forHTML 属性。工具提示出现，但是当我更改所选值时，它消失并且不再显示。

这是我的代码：

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 元素。

更改选择后如何显示工具提示？

标签： javascriptreactjsreact-select

Answer 1

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

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