Question

我有这个组件形式react-tooltip我传递了一些道具，它创建了工具提示。我希望工具提示的位置是＆＃34; top＆＃34;默认情况下，但是当我将道具传递到不同的地方时，要更改它。

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组件，我只想将这个组件放在底部。

    <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

我今天也遇到了这个问题，我能够解决它，对于您来说，这可能不再与您相关，

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

Heres the same issue.

React-tooltip渲染两次

1 个答案: