Javascript 将道具传递到自定义MUI工具提示值的反应组件

我试图在MUI中向工具提示显示自定义值

工具提示API：

工具提示与滑块一起使用，因此值1、2、3等显示在工具提示中，但我需要将此整数值转换为有意义的值

因此，我需要传递一个包含这些值的映射的道具（即对象）。i、 e.代表1=伦敦，2=巴塞罗那等

在本例中，我试图将一个道具传递给ValueLabelComponent

是否可以将道具值传递到此组件？如果可以，如何传递

  <Slider
    ValueLabelComponent={ValueLabelComponent}
    aria-label="custom thumb label"
    defaultValue={20}
  />

function ValueLabelComponent(props) {
  //need custom prop value here
  const { children, open, value } = props;

  return (
    <Tooltip open={open} enterTouchDelay={500} placement="bottom" title=. {'test value'}>
      {children}
    </Tooltip>
  );
}

功能值LabelComponent（道具）{
//这里需要自定义道具值
const{children，open，value}=props；
返回(
{儿童}
);
}

您可以将任何需要的道具传递给

ValueLabelComponent

函数，如下所示：

ValueLabelComponent={(props) =>
          ValueLabelComponent(
            props,
            props.value < 20 ? "smaller than 20" : "bigger than 20"
          )
        }

ValueLabelComponent={（道具）=>
值标签组件(
道具，
道具值<20？“小于20”：“大于20”
)
}

然后，可以在函数中使用这些值在工具提示中显示这些值的含义：

function ValueLabelComponent(props, map) {
  const { children, open, value } = props;
  return (
    <Tooltip open={open} enterTouchDelay={0} placement="top" title={map}>
      {children}
    </Tooltip>
  );
}

功能值标签组件（道具、地图）{
const{children，open，value}=props；
返回(
{儿童}
);
}

---

嗨！你能再解释一下吗？您想将什么样的道具传递给

ValueLabelComponent

函数？@alisasani编辑了答案，并提供了更多细节，道具将是一个对象，其中包含一个表示1=伦敦、2=巴塞罗那等城市的地图，谢谢