React Tooltip中嵌入Kendo UI进度条不显示进度的问题

问题根源 #

你通过ReactDOMServer.renderToString将Kendo ProgressBar转换为静态HTML，再通过data-tooltip-html传给react-tooltip。但Kendo的ProgressBar是依赖客户端React环境初始化的动态组件——静态HTML仅保留外层容器，不会触发组件的渲染逻辑，自然无法显示进度条的填充内容。

修复代码 #

直接利用react-tooltip支持React组件作为内容的特性，无需转换为静态HTML：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'react-tooltip/dist/react-tooltip.css'
import { Tooltip as ReactTooltip } from 'react-tooltip'
import { ProgressBar } from '@progress/kendo-react-progressbars';

const App = () => {
  const TooltipContentTemplate = () => (
    <div style={{ padding: '8px' }}>
      <ProgressBar value={20} labelVisible={false} />
    </div>
  );

  return (
    <div className="container">
      <div className="row mb-4" id="1">
        Hello World
      </div>
      {/* 直接传入React组件作为Tooltip内容 */}
      <ReactTooltip 
        anchorId="1"
        style={{ 
          zIndex: 10, 
          backgroundColor: "#000", 
          width: "200px", 
          border: '1px solid #000' 
        }}
      >
        <TooltipContentTemplate />
      </ReactTooltip>
      <div>
        <ProgressBar value={20} labelVisible={false}/>
      </div>
    </div>
  );
};

ReactDOM.render(
  <App />,
  document.querySelector('my-app')
);

核心修改点 #

• 删除data-tooltip-html属性和ReactDOMServer相关代码，改用react-tooltip的子组件传递内容，让React正常挂载Kendo ProgressBar并执行其渲染逻辑。
• 调整tooltip样式：移除color:black（避免内容和背景同色无法看见），添加内边距优化显示效果。

替代写法（用content属性） #

如果需要更灵活地控制内容，也可以使用content属性传入组件：

<ReactTooltip 
  anchorId="1"
  content={<TooltipContentTemplate />}
  style={{ zIndex:10, backgroundColor:"#000", width:"200px", border:'1px solid #000' }}
/>

内容的提问来源于stack exchange，提问作者Vandana