[英]React Tooltip using Components
I have a google maps widget on my page with markers on it to represent specific locations.我的页面上有一个谷歌地图小部件,上面有标记来表示特定位置。 I have made it so that when you click on the marker, a tooltip will appear above it to show more information.我已经这样做了,当你点击标记时,一个工具提示会出现在它上面以显示更多信息。 I am using react tooltip .我正在使用反应工具提示。 Here's my index.jsx
这是我的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>
Here's my Marker.jsx
这是我的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;
And then my MarkerWindow.jsx
然后是我的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;
But when I load the page, I get this:但是当我加载页面时,我得到了这个:
How do I load custom components into ReactTooltip?如何将自定义组件加载到 ReactTooltip 中?
react-tooltip doesn't support components as the tooltip content, but accepts html strings. react-tooltip 不支持组件作为工具提示内容,但接受 html 字符串。
You should use the data-html={true}
prop to let the react-tooltip know that the value passed to data-tip
is actually an HTML code.您应该使用data-html={true}
属性让 react-tooltip 知道传递给data-tip
的值实际上是一个 HTML 代码。
Then you should provide the html of the tooltip content as a string
.然后您应该提供工具提示内容的 html 作为string
。
So this should work:所以这应该有效:
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}
/>
</>
)
};
I converted your MarkerWindow
component to an HTML string by inlining the styles from the styled-component.我通过从样式组件中内联 styles 将您的MarkerWindow
组件转换为 HTML 字符串。
However, if you are not limmited to use react-tooltip I suggest to use other packages that let you render react components for a tooltip content.但是,如果您不限于使用 react-tooltip,我建议使用其他包,让您为工具提示内容呈现反应组件。 Take a look at @tippyjs/react for example.例如,看看@tippyjs/react 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.