如何从地图中获取数据到我的工具提示中？

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>`

如何从地图中获取数据到我的工具提示中？

How to get data into my tooltip from a map?

reactjs

react-tooltip