javascript
html实体转换成xa0,关于javascript：反应道具：在JSX动态内容中使用HTML实体？
我有一個React組件，我想為其道具分配一個包含JavaScript變量和HTML實體的字符串。
我嘗試過的一些方法導致HTML實體被轉義。例如，從字面上呈現為" "而不是" –"。
有沒有辦法讓HTML實體在分配給React道具的JSX動態內容塊中呈現為未轉義？
嘗試了
使用模板文字嘗試：
...
問題：在渲染的輸出中，的字面顯示為" "，而不是" –"。
嘗試構建一些不帶引號的簡單JSX：
問題：這在編譯時失敗，出現語法錯誤。
通過將JSX包裝在元素中來嘗試解決語法錯誤：
{name} ?{description}} ...
問題：可以，但是我寧愿避免在渲染輸出中出現多余的元素。
嘗試將HTML實體替換為Unicode數字字符引用：
問題：
這可行，但是(我認為)使代碼少了一點
可讀的。 (更明顯的是，" ndash"而不是" 2013"
代表一個破折號。)
同樣，這涉及到+-運算符的串聯，這會在我團隊的JSLint檢查器中觸發Unexpected string concatenation prefer-template錯誤。使用字符串插值的解決方案會更好。
的子元素上的dangerouslySetInnerHTML是否有效？
將其分配給變量，然后使用它：let temp_str = $ {name} $ {description}``
@Tony：在title屬性中使用。
@ T.J.Crowder我看到了title道具，但是(也許是錯誤的？)假設將呈現一些實際元素，例如h1，div，p等。
如果您用一個最小的可重現的示例演示問題來更新您的問題，這將對人們有所幫助，最好是使用Stack Snippets([<>]工具欄按鈕)可運行的示例。堆棧片段支持React，包括JSX；這是怎么做的。
@Tony：考慮到span起作用的事情，您可能是對的。但是，在prop中允許HTML，然后使用dangerouslySetInnerHTML將會很危險。 :-D
@ T.J。Crowder哦，絕對可以！
Im AGAINS React在字符串變量中用–替換了，因為當您希望按原樣顯示字符串時(例如，顯示用戶評論)，此功能需要對其進行預處理。這種替換僅適用于JSX(幾乎是HTML)。
您可以使用Fragment避免多余的span：
{name} ?{description}>} ...
這個功能是在React 16.2中引入的。
請參閱文檔
我同意@samanime的觀點，使用實際字符最適合簡單的情況，但是如果您的內容真正是動態的，我寧愿使用Fragment而不是entityToChar或dangerouslySetInnerHTML方法。
以下是一些選項(我不久前在較籠統的答案中概述了這些選項)：
最簡單-使用Unicode
更安全-在Javascript字符串中為實體使用Unicode數字。
要么
不得已-使用dragonallySetInnerHTML插入原始HTML。
title={`${name} ?${description}`}
與：
const MyPanel = (props) => {
return (
{props.title}
)
}
const MyPanelwithDangerousHTML = (props) => {
return (
)
}
var description ="description";
var name ="name";
ReactDOM.render(
, document.getElementById("option1"));
ReactDOM.render(
, document.getElementById("option2"));
ReactDOM.render(
, document.getElementById("option3"));
ReactDOM.render(
, document.getElementById("option4"));
這是React關于HTML實體的文檔：JSX陷阱
其中，最好使用實際字符而不是HTML實體：
如果由于HTML實體是動態的而不能這樣做(這不僅僅是硬編碼的破折號)，則可以翻譯該實體。這是一個可以執行此操作的小功能：
const entityToChar = str => {
const textarea = document.createElement('textarea');
textarea.innerHTML = str;
return textarea.value;
}
然后，您可以像這樣使用它：
當然，問題在于，就像dangerouslySetInnerHTML一樣，這意味著組件很高興地呈現通過道具接收到的HTML內容，就像dangerouslySetInnerHTML一樣，這是危險的。 :-)
它比dangerouslySetInnerHTML好一點，因為它隨后會以textarea值的形式返回，這會剝離很多HTML。
由于您可能不想在title道具中允許使用任意URL，因此我很想為自己編寫一個僅處理將字符實體轉換為等效Unicode字符的函數。有點像" HTML-lite"。 :-)實際上，命名引用并不多；和數字的很容易：
const named = {
"ndash":"–", // or"\u2013"
"mdash":"—", // or"\u2014"
"nbsp":"" ? // or"\u00A0"
// ...
};
// Obviously this is a SKETCH, not production code!
function convertCharEntities(str) {
return str.replace(/&([^ ;&]+);/g, (_, ref) => {
let ch;
if (ref[0] ==="#") {
let num;
if (ref[0].toLowerCase() ==="x") {
num = parseInt(ref.substring(2), 16);
} else {
num = parseInt(ref, 10);
}
ch = String.fromCodePoint(num);
} else {
ch = named[ref.toLowerCase()];
}
return ch ||"";
});
}
然后在渲染該道具時使用它：
class Example extends React.Component {
render() {
return {convertCharEntities(this.props.title ||"")};
}
}
完整直播示例：
const named = {
"ndash":"–", // or"\u2013"
"mdash":"—", // or"\u2014"
"nbsp":"" ? // or"\u00A0"
// ...
};
// Obviously this is a SKETCH, not production code!
function convertCharEntities(str) {
return str.replace(/&([^ ;&]+);/g, (_, ref) => {
let ch;
if (ref[0] ==="#") {
let num;
if (ref[0].toLowerCase() ==="x") {
num = parseInt(ref.substring(2), 16);
} else {
num = parseInt(ref, 10);
}
ch = String.fromCodePoint(num);
} else {
ch = named[ref.toLowerCase()];
}
return ch ||"";
});
}
class Example extends React.Component {
render() {
return {convertCharEntities(this.props.title ||"")};
}
}
ReactDOM.render(
,
document.getElementById("root")
);
請注意，標簽未作為標簽輸出，但已處理實體。
不知道的工作方式，我只能推測您可以執行以下操作：
...
MyPanel.js
render() {
const { title } = this.props;
return ;
}
總結
以上是生活随笔為你收集整理的html实体转换成xa0,关于javascript：反应道具：在JSX动态内容中使用HTML实体？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python实现多智能体一致性_促进产学
- 下一篇： JS 打印 data数据_数据表格 Da