使用react-tooltip时如何为谷歌地图标记加载自定义组件？

问题核心原因 #

1. 你使用的版本的react-tooltip的data-tip属性仅支持传入字符串，直接传入React组件实例会被自动转为[object Object]，这就是你截图异常的直接原因。
2. MarkerWindow.jsx中JSX插值语法错误，你误用了模板字符串的${}语法，JSX中直接用{}取值即可。
3. 你给StyledSection设置的18px宽高过小，无法容纳tooltip内容，会导致内容溢出。

修复步骤 #

1. 修改Marker.jsx

需要先把自定义组件转为HTML字符串，利用react-dom/server的renderToString方法，配合ReactTooltip开启的html属性即可正确渲染：

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import MarkerWindow from "./MarkerWindow"

const Marker = ({ place }) => {
  // 将自定义组件转为HTML字符串
  const tip = ReactDOMServer.renderToString(<MarkerWindow place={place}/>);
  return (
    <Wrapper
      data-for="google"
      data-event="click focus"
      data-tip={tip}
    />
  )
};

export default Marker;

2. 修改MarkerWindow.jsx

修复插值语法和样式问题：

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

const MarkerWindow = ({ place }) => (
  <StyledSection>
    {/* 去掉$，直接用JSX插值语法 */}
    <h3>{place.name}</h3>
    <p>
      {place.address}
      <br />
      {place.number}
      <br />
    </p>
  </StyledSection>
);

// 调整样式，去掉固定宽高，设置最小宽度适配内容
const StyledSection = styled.div`
  min-width: 160px;
  padding: 8px 12px;
  background-color: #e01414;
  color: #fff;
`;

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

export default MarkerWindow;

3. 可选优化index.jsx的Tooltip配置

可以增加偏移、延迟等配置优化交互：

<ReactTooltip
  id="google"
  html
  multiline
  offset={{ top: -10 }} // 调整tooltip和标记的间距
  delayShow={50}
/>

内容的提问来源于stack exchange，提问作者John Bernal