如何解決這種違反eslint規則的'react/no-unescaped-entitie'的行爲？

Question

這是我的代碼：

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

不知何故eslint標誌線「你是自由的」，錯誤error HTML entities must be escaped react/no-unescaped-entities

從我所看到的JSX已經逃脫了撇號

不過。我可以看到文字you're free呈現沒有問題。如果我將它轉義爲'，那麼我很難搜索字符串（我期望在編輯器中搜索you're free以返回命中，但顯然編輯器會因爲文本實際上是you're free而丟失）

那麼解決這個eslint異常的最好方法是什麼？

Answer 1

我明確由包圍線在{" "}逸出文本的整個塊：

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

Answer 2

推薦解決方案是使用'，‘或’代替包裹它作爲變量的。所以像這樣：

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

對於搜索能力，建議您有本地化/國際化的文件並將它們調用到您的應用程序中。

Answer 3

上述解決方案僅適用於某些情況。它不適合我。就我而言，我認爲這是因爲我們在項目中也使用了prettier。爲了解決這個錯誤，我把這個副本用反引號包起來。

const func =() => { 
    return (
    <div> 
     {` 
     You're free. 
     `} 
    </div> 
) 
}