javascript - 如何修复缺少的 jsx 表达式容器围绕文字字符串？

Question

我有以下代码作为工具提示。

<Tooltip
     portalClassName="HelpIcon"
     title="Have a question?"
     content={<div>We're hard at work building out a more robust help tool. In the meantime, check out the current {helpContent} on the wiki.</div>}
     centered
     trigger="click"
     placement="bottom"
     tooltipType="popover"
     >
     {helpIcon}
</Tooltip>

我遇到了一个 eslint 错误

“我们正在努力构建更强大的帮助工具。与此同时，请查看 wiki 上当前的 {helpContent}。”

说“缺少围绕文字字符串的 JSX 表达式容器 (react/jsx-no-literals)”

无论如何我可以将它变成该div内的字符串以避免出现该错误？

标签： javascriptreactjsexpressionjsxeslint

Answer 1

你也可以这样做：

<Tooltip
  portalClassName="HelpIcon"
  title="Have a question?"
  content={<div>{'We're hard at work building out a more robust...'}</div>}
  centered
  trigger="click"
  placement="bottom"
  tooltipType="popover"
 >
  {helpIcon}
</Tooltip>

规则文档