使用组件反应工具提示

Question

我的页面上有一个 google 地图小部件，上面带有标记以表示特定位置。我已经这样做了，当你点击标记时，一个工具提示会出现在它上面以显示更多信息。我正在使用 react tooltip。这是我的 index.jsx

<GoogleMaps
  bootstrapURLKeys={{ key: /* KEY */ }}
  center={center}
  zoom={zoom}
>
  <ReactTooltip
    id="google"
    html
    multiline
  />
  {markers.map((marker) => (
    <Marker
      key={marker.key}
      place={marker}
      lat={marker.lat}
      lng={marker.lng}
    />
  ))}
</GoogleMaps>

这是我的 Marker.jsx

import React from 'react';
import MarkerWindow from "./MarkerWindow"

const Marker = ({ place }) => {
  const tip =
    <>
      <MarkerWindow place={place}/>
    </>;
  return (
    <>
      <Wrapper
        data-for="google"
        data-event="click focus"
        data-tip={tip}
      />
    </>
  )
};

export default Marker;

然后是我的MarkerWindow.jsx

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const MarkerWindow = ({ place }) =>
  (
    <StyledSection>
      <h3>${place.name}</h3>
      <p>
        ${place.address}
        <br />
        ${place.number}
        <br />
      </p>
    </StyledSection>
  );

const StyledSection = styled.div`
  width: 18px;
  height: 18px;
  background-color: #e01414;
`;

MarkerWindow.propTypes = {
  place: PropTypes.object.isRequired,
};

export default MarkerWindow;

但是当我加载页面时，我得到这个：

如何将自定义组件加载到 ReactTooltip 中？

Answer 1

react-tooltip 不支持组件作为工具提示内容，但接受 html 个字符串。

你应该使用 data-html={true} 属性让 react-tooltip 知道传递给 data-tip 的值实际上是一个 HTML 代码。
那么您应该提供工具提示内容的 html 作为 string。

所以这应该有效：

const Marker = ({ place }) => {
  const tip = `
    <div style="width: 18px; height: 18px; background-color: '#e01414';" >
      <h3>${place.name}</h3>
      <p>
        ${place.address}
        <br />
        ${place.number}
        <br />
      </p>
    </div>
  `;

  return (
    <>
      <Wrapper
        data-for="google"
        data-event="click focus"
        data-html={true}
        data-tip={tip}
      />
    </>
  )
};

我通过内联 styled-component 的样式，将您的 MarkerWindow 组件转换为 HTML 字符串。

但是，如果您不限于使用 react-tooltip，我建议使用其他包，让您为工具提示内容呈现 React 组件。例如看一下 @tippyjs/react。

使用组件反应工具提示

React Tooltip using Components

javascript

tooltip

reactjs