Я установил для состояния значение по умолчанию <b> Hey </b> . Теперь, когда я визуализировал это состояние в пользовательском интерфейсе, он напечатал строку вместо того, что написано полужирным шрифтом. Я хочу знать, почему это не работает. Почему React не может интерпретировать тег html и показать соответствующий результат
import { useState } from "react";
import "./styles.css";
export default function App() {
const [html, setHtml] = useState("<b>Hey</b>");
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<div>{html}</div>
</div>
);
}
Выход :-
Ожидал, что вывод будет Hey выделенным жирным шрифтом.
Вот ссылка на codeandbox для лучшего понимания: - https: // codeandbox.io/s/heuristic-chaum-vo6qt?file=/src/App.js
Спасибо. Я просто хочу знать, почему react не может отобразить HTML-тег как HTML-тег вместо того, чтобы распечатать его.
3 ответа
Вы устанавливаете значение html как "<b>Hey</b>", которое является строковой строкой, поэтому она отображает это как есть. Вы можете напрямую назначить html переменной следующим образом:
const [html, setHtml] = useState(<b>Hey</b>);
Потому что вы визуализируете строку, а не HTML. Если вы хотите отображать строковый HTML-код, используйте опасноSetInnerHTML, будьте осторожны при прохождении Другими словами, вы можете сначала пропустить строку через очиститель DOM.
export default function App() {
const [html, setHtml] = useState("<b>Hey</b>");
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<div dangerouslySetInnerHTML={{ __html: html}} />
</div>
);
}
Это строка, а не HTML, чтобы исправить это, возможно, вы можете вставить ее в div как innerHTML , т.е.
document.querySelector(".divClassName").innerHTML = html