工具提示描述未显示 springboot/reactJS/material-UI

Question

当我将鼠标悬停在图标（infoIcon）上时，我正在尝试制作一个工具提示。工具提示是动态的，这意味着当您将鼠标悬停在图标上时，每个数据源都会有不同的工具提示。我已经使用 json 对象设置了后端，当我检查网络选项卡中的数据源时，我在前端看到了 Json 描述（在运行后端服务器之后）。所以 JSON 数据即将到来，这正是我想要的，但是工具提示没有显示我在 Json 对象中设置的描述。下面是我作为 JSON 对象示例所拥有的内容，以及我在打字稿中的工具提示代码所拥有的内容。下面是对网络选项卡上数据源的检查，证明 sourceDescriptions 是从后端读取的。感谢您的帮助！

group: "NETWORKS"
index: "networks_home"
isPsr: true
name: "2.4ghzLAN"
sourceDescription: I do not like them, Sam-I-Am"

这是我的工具提示代码：

  checked: boolean
  value: string
  label: string
  onChange: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void
  onlySelectHandler: (s: string) => void
  showZeroCounts?: boolean
  count: number
  disabled?: boolean
  indeterminate?: boolean
  sourceDescription?: string
}

const FilterCheckbox: React.FC<FilterCheckbox> = props => {
  const {
    checked,
    value,
    onChange,
    label,
    count,
    showZeroCounts,
    children,
    disabled,
    indeterminate,
    sourceDescription,
  } = props

fullLabel = (
      <Grid container={true} wrap={'nowrap'} className={classes.labelWrapper}>
        <Grid item={true} xs={_.toNumber(fontSize) >= 22 ? 11 : false} className={classes.flex}>
            <Tooltip title={sourceDescription!}>
              <InfoIcon>
              </InfoIcon>
            </Tooltip>
          
          <Tooltip title={_.toNumber(fontSize) >= 22 ? label : ''}>
            <Typography noWrap={true}>{`${label}`}</Typography>
          </Tooltip>
          <Grid item={true} className={classes.flex}>
            {children} <OnlySelectHandler {...props} />
          </Grid>
        </Grid>
      </Grid>
    )

Answer 1

sourceDescription后面的感叹号需要去掉

<Tooltip title={sourceDescription!}> 

到

<Tooltip title={sourceDescription}>