antd toolTip 的title内容是一个ul,鼠标悬浮上去会出现[object object]如何解决

出现 `[object object]` 的原因是因为 `title` 属性只能接收字符串类型的值，而 `ul` 是一个 HTML 元素对象，所以需要将 `ul` 元素对象转换为字符串类型的值。

你可以使用 `ReactDOMServer.renderToString()` 方法将 `ul` 元素对象转换为字符串类型的值，然后将它赋值给 `title` 属性。

示例代码如下：

import { Tooltip } from 'antd';
import ReactDOMServer from 'react-dom/server';

const ul = (
  <ul>
    <li>item 1</li>
    <li>item 2</li>
  </ul>
);

const title = ReactDOMServer.renderToString(ul);

<Tooltip title={title}>Hover me</Tooltip>

这样就可以在 Tooltip 中正确显示 ul 元素对象的内容了。

相关问题

antd toolTip 的title内容是一个ul,鼠标悬浮上去会同时出现正确内容和[object object]如何解决

如果鼠标悬浮在 `Tooltip` 上时，既要正确显示 `ul` 元素对象的内容，又要避免出现 `[object object]`，你可以通过在 `Tooltip` 的 `onVisibleChange` 属性中动态设置 `title` 属性来实现。

具体做法是，在 `Tooltip` 的 `onVisibleChange` 回调函数中，判断 `visible` 参数的值是否为 `true`，如果是，则将 `ul` 元素对象转换为字符串类型的值，并将它赋值给 `title` 属性；如果不是，则将 `title` 属性的值设置为空字符串。

示例代码如下：

import { Tooltip } from 'antd';
import ReactDOMServer from 'react-dom/server';
import { useState } from 'react';

const ul = (
  <ul>
    <li>item 1</li>
    <li>item 2</li>
  </ul>
);

const TooltipWithUlTitle = () => {
  const [title, setTitle] = useState('');

  const handleVisibleChange = (visible) => {
    if (visible) {
      setTitle(ReactDOMServer.renderToString(ul));
    } else {
      setTitle('');
    }
  };

  return (
    <Tooltip title={title} onVisibleChange={handleVisibleChange}>
      Hover me
    </Tooltip>
  );
};

这样，当鼠标悬浮在 `Tooltip` 上时，就会正确显示 `ul` 元素对象的内容，而不会出现 `[object object]`。

antd toolTip 的title内容是一个ul,鼠标悬浮上去会先出现正确内容，然后再出现[object object]如何解决

出现先正确显示内容，然后再出现 `[object object]` 的问题，可能是因为 `Tooltip` 组件渲染时会先展示一个默认的 `title`，然后再根据实际的 `title` 进行更新。

为了解决这个问题，你可以在 `Tooltip` 的 `visible` 属性变为 `true` 时，手动触发一次 `Tooltip` 的更新，让它显示正确的 `title`。

具体做法是，在 `Tooltip` 的 `onVisibleChange` 回调函数中，判断 `visible` 参数的值是否为 `true`，如果是，则将 `ul` 元素对象转换为字符串类型的值，并将它赋值给 `title` 属性；然后，手动调用 `Tooltip` 的 `updateTooltipVisible` 方法进行更新。

示例代码如下：

import { Tooltip } from 'antd';
import ReactDOMServer from 'react-dom/server';
import { useRef } from 'react';

const ul = (
  <ul>
    <li>item 1</li>
    <li>item 2</li>
  </ul>
);

const TooltipWithUlTitle = () => {
  const tooltipRef = useRef(null);

  const handleVisibleChange = (visible) => {
    if (visible) {
      const title = ReactDOMServer.renderToString(ul);
      tooltipRef.current.setState({ title }, () => {
        tooltipRef.current.updateTooltipVisible(visible);
      });
    }
  };

  return (
    <Tooltip title="" ref={tooltipRef} onVisibleChange={handleVisibleChange}>
      Hover me
    </Tooltip>
  );
};

这样，当鼠标悬浮在 `Tooltip` 上时，就会先正确显示 `ul` 元素对象的内容，然后再更新为正确的 `title`，避免了出现 `[object object]` 的问题。