MUI 评级自定义工具提示可提高渲染性能

Question

我尝试使用以下代码在用户选择评级星级时显示工具提示，但性能非常差（它是巨大的 MUI 组件的一部分）。

我想知道我是否可以用

IconContainerComponent

达到同样的效果。这可能吗？

<Tooltip title={labels[ratingTooltipValue !== -1 ? ratingTooltipValue : 1]}>
<Box display="inline-block">
<Rating
   value={parseInt(field.value, 10)}
   onChange={(newValue) => {
      field.onChange(newValue);
   }}
   precision={1}
   size="small"                                       
   readOnly={viewMode}
   onChangeActive={(event, newHover) => {
      setRatingTooltipValue(newHover);
   }}

/>
</Box>
</Tooltip>

性能示例

https://codesandbox.io/p/sandbox/priceless-feather-w3rrpf?file=%2Fdemo.tsx%3A12%2C18

编辑我在

onChangeActive

内添加了2秒的延迟，现在看起来好多了。作为替代解决方案，我可以在

IconContainerComponent

内使用自定义工具提示吗

Answer 1

这就是答案

const TOOLTIP_LABELS = {
   1: 'Useless',
   2: 'Poor',
   3: 'Good',
   4: 'Very Good',
   5: 'Excellent',
};
.....

<Rating
   value={parseInt(field.value, 10)}
   onChange={(newValue) => {
      field.onChange(newValue);
   }}
   precision={1}
   size="small"                                       
   readOnly={viewMode}
   onChangeActive={(event, newHover) => {
    const tooltip = document.getElementById(`label-onrate-${index}`);
    if (newHover !== -1) {
       tooltip.innerHTML = TOOLTIP_LABELS[newHover];
       tooltip.style.visibility = 'visible';
    } else {
       tooltip.style.visibility = 'hidden';
    }
 }}
/>
<div className="tooltip">
   <span className="tooltiptext" id={`label-onrate-${index}`} />
</div>

和 CSS 文件

[![.tooltip {
  position: relative;
  display: inline-block;  
}

/* Tooltip text */
.tooltip .tooltiptext {
  width: 120px;
  top: -60px;
  left: 50%;  
  margin-left: -100px;  

  display: inline-block;
  visibility: hidden;  
  background-color: white;
  color: #000;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1300;
}

/* arrow */
.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; 
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: white transparent transparent transparent;
}