ThoughtChain - Item 当title是ReactNode 并且开启了折叠 collapsible 之后无法渲染Title

[450611]

重现步骤

引用官方文档示例: https://ant-design-x.antgroup.com/components/thought-chain-cn#thought-chain-demo-collapsible

其中修改item
.....
const items: ThoughtChainProps['items'] = [
{
key: 'item-1',
title:

Click me to expand the content

, //修改成ReactNode
description: 'Collapsible',
content: mockContent,
status: 'success',
},
{
key: 'item-2',
title: 'Click me to expand the content',
description: 'Collapsible',
content: mockContent,
status: 'pending',
},
];
....

当前行为

无法渲染出ReactNode

预期行为

正确渲染出Title

上下文

No response

版本

1.3.0

您在哪些浏览器上遇到了这个问题？

No response

[dosubot]

Hi @450611! I'm Dosu and I’m helping the x team.

这个问题在 1.3.0 版本已被确认，ThoughtChainItem 的 title 属性虽然类型是 ReactNode，但在开启 collapsible 时，如果 title 是 ReactNode（比如 JSX 元素），会导致无法正常渲染，只有字符串类型可以正常显示。根本原因是组件内部用于 tooltip/ellipsis 的 title 属性只接受字符串，传入 ReactNode 会导致渲染异常或显示 [Object Object]，详见相关 issue。

目前官方文档和 demo 都只展示了字符串 title，没有 ReactNode 的用例，也没有 workaround 或修复说明。类似场景在其他组件（如 Select）也遇到过，推荐做法是：显示部分用 ReactNode，tooltip/title 属性单独传字符串。例如：

const items = [
  {
    key: 'item-1',
    title: (
      <div>
        Click me to expand the content
      </div>
    ),
    plainTitle: 'Click me to expand the content', // 纯文本
    description: 'Collapsible',
    content: mockContent,
    status: 'success',
  },
];

// 渲染时
<Typography.Text
  ellipsis={{ tooltip: { title: item.plainTitle } }}
>
  {item.title}
</Typography.Text>

如果你需要 tooltip 或 ellipsis，建议在 title 之外加一个纯文本字段用于 tooltip/title 属性，显示部分继续用 ReactNode。这样可以兼容所有场景，避免渲染异常。相关讨论和解决方案。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[450611]

源码中并没有 plainTitle , 应该是不支持这个参数的吧

[dosubot]

你说得对，源码和文档里确实没有 plainTitle 这个参数，目前 ThoughtChain 组件也不支持这个 prop。title 虽然类型是 ReactNode，但在 collapsible 模式下，内部 tooltip/ellipsis 逻辑期望的是字符串，如果传入 ReactNode 会导致渲染异常或 tooltip 显示 [Object Object]，这是已知的实现限制，并不是通过 plainTitle 解决的源码参考。

目前没有官方 workaround。如果你需要 tooltip 或省略号，建议在外层自行处理，比如用 Typography.Text 包裹，tooltip 的内容单独传字符串，显示部分用 ReactNode。这样可以兼容大部分场景，但需要你自己实现 tooltip 的 plain text 提取。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}