安全的字符串輸出陣營生態系統

Question

如果你想顯示在一個陣營視圖°˚F像°F一個字符串，我已經找到了記錄的方式做到這一點，就像這樣：

import React from 'react'; 

export default function renderSafeHTML(rawHTML, element = 'div') { 
    return React.createElement(element, { 
    dangerouslySetInnerHTML: { 
     __html: rawHTML 
    } 
    }); 
} 

而作爲使用例如：

{renderSafeHTML('°F')} 

生態系統中是否有任何助手來簡化轉義內容？ Ember具有用於轉義的{{content}}和用於顯示不轉義的內容的{{{content}}}以及用於將字符串標記爲安全的.safeString。

React中是否有類似的東西？我很想知道如何將這個功能添加到JSX中，如{}和{{}}，類似於Ember。爲什麼React中不存在？

Answer 1

我相信React希望你知道它的危險性。他們希望你去努力輸入所有這些。他們不想讓它變得更容易。

這是從自己的文件採取：

一般來說，從代碼中設置HTML是有風險的，因爲它很容易在不經意間 使您的用戶能夠跨站點腳本（XSS）攻擊 。所以，你可以直接從React中設置HTML，但是你必須輸入 而不是危險的SetInnerHTML並且用__html鍵傳遞一個對象到 提醒你自己它是危險的。

https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

Answer 2

我使用的反應16X

你並不需要的unicode幫手 - 您可以直接在JSX

<h1>40{'\u00B0'}F</h1>

或

嵌入Unicode字符

<h1>40&deg;F</h1>

這會告訴你一切你需要知道：

https://shripadk.github.io/react/docs/jsx-gotchas.html#html-entities