Реагировать: как предотвратить экранирование в атрибуте данных
У меня есть JSON, который выглядит так { "id": "xyz", "height": 1024, "width": 1024}, который я хотел бы иметь в атрибуте данных, например:
<div data-command='{"id":"xyz","height":1024,"width":1024}'></div>
но когда я использую реакцию, она экранирует строку, как показано ниже:
<div data-command='{"id":"xyz","height":1024,"width":1024}'></div>
Я использую этот код для создания элемента
React.createElement("div",
{ "data-command" : JSON.stringify({ "id":"xyz", "height":1024, "width":1024 }), null)
кто-нибудь знает, как я могу получить JSON без «экранирования?
Если это невозможно, как я могу преобразовать его обратно в javascript, чтобы после этого я мог использовать JSON.parse?
привет, это в блоках wordpress Гутемберга, поэтому реакция используется в административной части, но когда она отображается для клиента, реакция больше не используется, и остается только атрибут (в административной части я действительно использую состояние и у меня нет проблем, спасибо к этому)
Должен ли он быть указан как действительный JSON? В противном случае вы можете попробовать использовать что-то вроде: { "data-command" : "{id:'xyz',height:1024,width:1024}" ), null).
да, нужно разобрать JSON.parse
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Атрибут 'dangerouslySetInnerHTML' как раз и используется для подобных сценариев.
createMarkup() {
return {__html: `<div data-command='{"id":"xyz","height":1024,"width":1024}'></div>`};
}
render() {
return (
<div dangerouslySetInnerHTML = {this.createMarkup()}>
</div>
);
}
это работает, однако я не могу ввести дополнительного родителя, я думаю, это невозможно сделать, если он устанавливает InnerHtml
Обратите внимание, что это ненадежный и это может привести к XSS-атакам! Я бы посоветовал держаться подальше от dangerouslySetInnerHtml. Обычно существует другое решение, не связанное с небезопасными операциями.
Разве вы не можете просто поместить
{ "id":"xyz", "height":1024, "width":1024 }в состояние приложения и использовать индекс или другую ссылку в качестве команды данных? Или использовать id = "xyz"?