React-tooltip 渲染两次

Question

我有这个组件形式的反应工具提示，我在其中传递了一些道具并创建了工具提示。我希望工具提示的位置默认为 "top"，但是当我将道具传递到不同的位置时，可以更改它。

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;

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

    <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

我运行今天也遇到了这个问题，我能够解决它，这可能与您不再相关，但对于正在寻找的人：

I had this issue with data-for and id as well, the solution for me was to set a more unique identifier/a combination of a word and a variable that I was getting from the parent component (i.e. id=`tooltip-${parent.id}`).

Heres the same issue.

Answer 2

如果在循环中使用 <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

React-tooltip 渲染两次

React-tooltip rendering two times

javascript

tooltip

reactjs