将 prop 传递给 react 组件以获取自定义的 MUI 工具提示值答案

【问题标题】：Passing prop to react component for customised MUI tooltip value将 prop 传递给 react 组件以获取自定义的 MUI 工具提示值
【发布时间】：2021-07-19 22:27:31
【问题描述】：

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

工具提示 API：https://material-ui.com/api/tooltip/#css

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

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

在此示例中，我尝试将道具传递给 ValueLabelComponent https://codesandbox.io/s/h0esn?file=/demo.js:432-651

是否可以将 props 值传递给该组件？如果可以，如何？

  <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>
  );
}

【问题讨论】：

嗨！你能解释更多吗？你想将什么样的道具传递给ValueLabelComponent 函数？
@alisasani 用更多细节编辑了答案，道具将是一个对象，其中包含代表 1 = 伦敦、2 = 巴塞罗那等的地图

标签： javascript reactjs material-ui tooltip

【解决方案1】：

您可以将任何您想要的道具传递给ValueLabelComponent func，如下所示：

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

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

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

sandbox

【讨论】：