如何在 Tooltip 的标题专业版中使用 if 语句返回字符串

发布于 2025-01-10 06:46:34 字数 896 浏览 0 评论 0原文

我试图通过调用函数并使用 if 语句有条件地提供工具提示的标题，但我遇到了错误。

  const getStatusMessage = (answer: AnswerStatus) => {
if (answer == AnswerStatus.ANSWER_SUBMITTED || answer == AnswerStatus.ANSWER_PROCESSING) {
  return 'answers are still being processed.'
} else if (answer == AnswerStatus.QUESTION_SERVED) {
  return "question was given to candidate but didn't answer it."
} else if (answer == AnswerStatus.ANSWER_FAILED) {
  return 'there was a problem processing the answer of the candidate.'
}

}

<Tooltip placement='bottom-end' title={getStatusMessage(answer.status)}><button/></Tooltip>

---ERROR MSG---

输入 'string | undefined' 不可分配给类型 'boolean |反应子|反应片段 |反应门户'。

类型“undefined”不可分配给类型“boolean |”反应子|反应片段 | ReactPortal'.ts(2322) Tooltip.d.ts(163, 3)：预期类型来自属性“title”，该属性在类型“IntrinsicAttributes &”上声明。工具提示道具

原文

im trying to conditionally provide the title of the tooltip by calling a function and using the if statement, but im having an error.

  const getStatusMessage = (answer: AnswerStatus) => {
if (answer == AnswerStatus.ANSWER_SUBMITTED || answer == AnswerStatus.ANSWER_PROCESSING) {
  return 'answers are still being processed.'
} else if (answer == AnswerStatus.QUESTION_SERVED) {
  return "question was given to candidate but didn't answer it."
} else if (answer == AnswerStatus.ANSWER_FAILED) {
  return 'there was a problem processing the answer of the candidate.'
}

}

<Tooltip placement='bottom-end' title={getStatusMessage(answer.status)}><button/></Tooltip>

---ERROR MSG---

Type 'string | undefined' is not assignable to type 'boolean | ReactChild | ReactFragment | ReactPortal'.

Type 'undefined' is not assignable to type 'boolean | ReactChild | ReactFragment | ReactPortal'.ts(2322)
Tooltip.d.ts(163, 3): The expected type comes from property 'title' which is declared here on type 'IntrinsicAttributes & TooltipProps'

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

有木有妳兜一样 2025-01-17 06:46:35

抛出该错误是因为 Tooltip 组件的 title 属性正在获取值 未定义

您没有涵盖answer.status 为 未定义 时的默认情况。

因此，

<Tooltip placement='bottom-end' title={answer.status? getStatusMessage(answer.status) : '' }><button/></Tooltip>

getStatusMessage 中的 return ''; 语句即可。

  const getStatusMessage = (answer: AnswerStatus) => {
if (answer == AnswerStatus.ANSWER_SUBMITTED || answer == AnswerStatus.ANSWER_PROCESSING) {
  return 'answers are still being processed.'
} else if (answer == AnswerStatus.QUESTION_SERVED) {
  return "question was given to candidate but didn't answer it."
} else if (answer == AnswerStatus.ANSWER_FAILED) {
  return 'there was a problem processing the answer of the candidate.'
}
return '';

The error is thrown because Tooltip component's title prop is getting value undefined

You didnt cover the default case when answer.status is undefined.

So either

<Tooltip placement='bottom-end' title={answer.status? getStatusMessage(answer.status) : '' }><button/></Tooltip>

or a return ''; statement in your getStatusMessage will do.

  const getStatusMessage = (answer: AnswerStatus) => {
if (answer == AnswerStatus.ANSWER_SUBMITTED || answer == AnswerStatus.ANSWER_PROCESSING) {
  return 'answers are still being processed.'
} else if (answer == AnswerStatus.QUESTION_SERVED) {
  return "question was given to candidate but didn't answer it."
} else if (answer == AnswerStatus.ANSWER_FAILED) {
  return 'there was a problem processing the answer of the candidate.'
}
return '';

回复收藏 0 原文

~没有更多了~