reactjs - 如何解决违反 ESLint 规则 'react/no-unescaped-entitie' 的问题？

Question

这是我的代码:

const func = () => {
  return (
    <div >
       you're free
      </div>
  )}

不知何故，ESLint 将“you're free”这一行标记为错误错误 HTML 实体必须转义 React/no-unescaped-entities

但是，据我所知，JSX 已经摆脱了撇号。我可以看到 you're free 字样的渲染没有问题。如果我将其转义为 '，那么我将很难搜索该字符串(我希望在编辑器返回一个命中。但显然编辑器会错过，因为文本实际上是youre free)

那么解决这个 ESLint 异常的最佳方法是什么？

Answer 1

建议的解决方案是使用 ‘、‘ 或 ’ 而不是将其包装为变量。像这样:

const func = () => {
  return (
    <div >
       you&apos;re free
      </div>
  )}

为了便于搜索，建议您拥有用于本地化/国际化的文件并将它们调用到您的应用中。