Я установил для состояния значение по умолчанию <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>
  );
}

Выход :-

enter image description here

Ожидал, что вывод будет Hey выделенным жирным шрифтом.

Вот ссылка на codeandbox для лучшего понимания: - https: // codeandbox.io/s/heuristic-chaum-vo6qt?file=/src/App.js

Спасибо. Я просто хочу знать, почему react не может отобразить HTML-тег как HTML-тег вместо того, чтобы распечатать его.

1
meet mehta 18 Ноя 2021 в 06:29

3 ответа

Лучший ответ

Вы устанавливаете значение html как "<b>Hey</b>", которое является строковой строкой, поэтому она отображает это как есть. Вы можете напрямую назначить html переменной следующим образом:

  const [html, setHtml] = useState(<b>Hey</b>);
1
Amruta 18 Ноя 2021 в 06:38

Потому что вы визуализируете строку, а не 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>
  );
}

Edit frosty-tdd-ftchp

enter image description here

1
Drew Reese 18 Ноя 2021 в 06:32

Это строка, а не HTML, чтобы исправить это, возможно, вы можете вставить ее в div как innerHTML , т.е.

document.querySelector(".divClassName").innerHTML = html
0
Kibekityo Juma Shafara 18 Ноя 2021 в 07:05