javascript - React-tooltip渲染两次

Question

我有这个组件形式的react-tooltip，我在其中传递了一些 Prop 并创建了工具提示。我希望工具提示的位置默认为“顶部”，但是当我将 Prop 传递到不同的位置时，可以更改它。

class Tooltip extends PureComponent {
  render() {
    const { text, element, type, place, className } = this.props;
    return (
      <div data-tip={text} className="m0 p0">
        {element}
        <ReactTooltip
          type={type}
          place={place}
          effect="solid"
          className={className}
          html
        />
      </div>
    );
  }
}

Tooltip.defaultProps = {
  type: 'info',
  place: 'top',
  className: 'tooltip-top',
};

Tooltip.propTypes = {
  text: PropTypes.string.isRequired,
  element: PropTypes.element.isRequired,
  type: PropTypes.string,
  place: PropTypes.sring,
  className: PropTypes.sring,
};

export default Tooltip;

然后我有另一个组件，我将一些 Prop 传递给工具提示组件，我只想将这个唯一的组件放置在底部。

    <Tooltip
      type="warning"
      place="bottom"
      className="tooltip-bottom"
      text={
        'Ingrese los datos de la información financiera histórica de su compañía en la plantilla'
      }
      element={
        <div className={`center mt3 ${styles.optionButton}`}>
          <NavLink
            className="btn btn-primary"
            to={`${path}/manual-upload`}
          >Continuar</NavLink>
        </div>
      }
    />

问题是在底部渲染，但也在顶部渲染。我怎样才能让它只出现在底部(在这个组件中，其余的工具提示在顶部)。谢谢 ;)

Answer 1

如果您使用<ReactTooltip />在循环内，那么您必须设置 data-for和id对于每一个。

const Tooltip = ({ children, data }) => {
  const [randomID, setRandomID] = useState(String(Math.random()))

  return (
    <>
      <div data-tip={data} data-for={randomID}>{children}</div>
      <ReactTooltip id={randomID} effect='solid' />
    </>
  )
}


export default Tooltip