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

Question

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

我希望 topline 和 bottomline consts 进入工具提示。

谁能指出我正确的方向？

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和bottomlineconsts 传递给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>`