如何将数据从地图中获取到工具提示中

Question

我正在使用react工具提示，但我不确定如何在工具提示中获取数据。

我希望在工具提示中显示顶部和底部常量。

有人能给我指正确的方向吗？

export const SmallCalendar = ({ events }) => {
const mapToRender = events?.map((e) => {
const topLine = (
<strong>
{e.Title} - {e.start.slice(0, -9)}
</strong>
);
const bottomLine = (
<Fragment>
<strong>Applies to</strong>: {e.AppliesTo.join(", ")}
</Fragment>
);
return (
<div
className={styles.eventContainer}
data-for="registerTip"
data-tip={e}
>
<div>
<div className={styles.eventContainerDate}>
<Moment format="MMM" className={styles.month}>
{e.start}
</Moment>
<Moment format="DD" className={styles.eventContainerLarge}>
{e.start}
</Moment>
</div>
}
</div>
</div>
);
});
return (
<div>
{mapToRender}
<ReactTooltip id="registerTip" place="top" effect="solid">
<p>Yo</p>
</ReactTooltip>
</div>
);
};

Answer 1

您可以将topline和bottomline常量传递给data-tip并添加data-html={true}。也可以这样改变你的常数：

const topLine = `<strong>${e.Title} - ${e.start.slice(0, -9)}</strong>`;
const bottomLine = `<Fragment><strong>Applies to</strong>: ${e.AppliesTo.join(", ")}</Fragment>`