Передача String с сущностью HTML в качестве реквизита, неправильно отображаемого в пользовательском интерфейсе материала

Question

Я столкнулся с проблемой с переключателями в пользовательском интерфейсе материала. Пользовательский интерфейс материала в настоящее время принимает значение в качестве опоры для компонента FormControlLabel. Когда мы передаем строку с сущностью HTML, как показано ниже, она анализируется, как и ожидалось.

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

Когда мы передаем ту же строку, что и реквизит, она анализируется неправильно и специальный символ показывается в том виде, в котором оно было отправлено.

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

Я пытался найти это в Интернете, но не смог найти ни одной соответствующей темы. Пожалуйста, свяжите меня с проблемой, если она уже существует, или предоставьте альтернативное решение, если у кого-то есть решение. Ниже приведена ссылка на коды и ссылки.

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

Answer 1

&....; - это HTML Entitiy - поэтому он работает, когда используется непосредственно в HTML, а не в javascript

. Вам необходимо декодировать его, чтобы использовать это в javascript

Один из способов такой же, как здесь https://medium.com/@tertiumnon / js - как декодировать - html -entities-8ea807a140e5

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

Таким образом, вы можете использовать его как

const label=decodeHTMLEntities("I'm male");

Более современный способ в современном javascript состоит в использовании теговых шаблонов

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