React-tooltip渲染两次

Question

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

\n\n

class Tooltip extends PureComponent {\n  render() {\n    const { text, element, type, place, className } = this.props;\n    return (\n      <div data-tip={text} className="m0 p0">\n        {element}\n        <ReactTooltip\n          type={type}\n          place={place}\n          effect="solid"\n          className={className}\n          html\n        />\n      </div>\n    );\n  }\n}\n\nTooltip.defaultProps = {\n  type: \'info\',\n  place: \'top\',\n  className: \'tooltip-top\',\n};\n\nTooltip.propTypes = {\n  text: PropTypes.string.isRequired,\n  element: PropTypes.element.isRequired,\n  type: PropTypes.string,\n  place: PropTypes.sring,\n  className: PropTypes.sring,\n};\n\nexport default Tooltip;\n

\n\n

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

\n\n

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

\n\n

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

\n

Answer 1

如果您<ReactTooltip />在循环内部使用，则必须为每个循环设置一个data-for and 。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

Answer 2

我今天也遇到了这个问题，我能够解决它，这可能与您不再相关，但对于寻找以下内容的人来说：

data-for我也遇到了这个问题id，我的解决方案是设置一个更唯一的标识符/我从父组件（即）获取的单词和变量的组合 id=`tooltip-${parent.id}`。

这是同样的问题。