将带有 HTML 实体的字符串作为道具在 material UI 中未正确呈现

Question

我遇到了 material UI 中单选按钮的问题。 Material UI 目前正在接受值作为 FormControlLabel 组件的道具。当我们如下所示传递带有 HTML 实体的字符串时，它会按预期进行解析。

<FormControlLabel value="female" label="I&#39;m male" />
output: I'm male

当我们传递相同的字符串作为 prop 时，它没有被正确解析，特殊字符显示为发送时的样子。

const label="I&#39;m male";
<FormControlLabel value={value} label={label} />
output: I&#39;m male

我试图在线搜索此内容，但找不到任何相关主题。如果问题已经存在，请 link 我解决这个问题，或者如果有人有解决方案，请提供替代解决方案。下面是codesandbox link.

https://codesandbox.io/s/material-demo-543y4

Answer 1

&....; 是一个 HTML Entitiy - 这就是为什么它在 HTML 中直接使用而不是在 javascript

中起作用的原因

您需要对其进行解码才能在 javascript

中使用

一种方法如这里https://medium.com/@tertiumnon/js-how-to-decode-html-entities-8ea807a140e5

function decodeHTMLEntities(text) {
  var textArea = document.createElement('textarea');
  textArea.innerHTML = text;
  return textArea.value;
}

所以你会像这样使用它

const label=decodeHTMLEntities("I&#39;m male");

在现代 javascript 中更简洁的方法是使用标记模板

const entityDecode = (() => {
    const el = document.createElement('textarea');
    return (strings) => {
        el.innerHTML = strings.join('');
        return el.value;
    }
})();
const label=entityDecode`I&#39;m male`;
console.log(label);

将带有 HTML 实体的字符串作为道具在 material UI 中未正确呈现

Passing String with HTML entity as a prop not rendered properly in material UI

javascript

radio-group

radio-button

reactjs

material-ui