将道具传递给反应组件以获得自定义 MUI 工具提示值

Question

我正在尝试在 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>
  );
}

Answer 1

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

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

将道具传递给反应组件以获得自定义 MUI 工具提示值

Passing prop to react component for customised MUI tooltip value

javascript

tooltip

reactjs

material-ui