Div не преобразует текст между тегами <b></b> html в настоящий полужирный текст

Question

Я динамически создаю одну строку в javascript, а затем отправляю ее для рендеринга внутри reactjs компонента. Например:

Сначала создается строка, а затем отображается

let displayText = "<b>Name: </b>" + this.name;
then 
render() {
   return (
 <div class={test-str}>
          {displayText}
        </div>
)

}

Но проблема в том, что на странице она переименовывается как "<b>Name: </b> TestName"

Как их получить <b> преобразовать в жирный шрифт?

FYI: - Я создаю эту строку внутри какой-то другой библиотеки Util. Вне компонента и обратный вызов утилиты, возвращающей эту строку.

Answer 1

, вы должны сделать это: ***(<span><b>Name: </b> {this.name}</span>)***, он будет отображать теги. используйте () для тегов рендеринга и убедитесь, что у вас есть основной контейнер, например ()

Answer 2

вы можете использовать dangerousSetInner HTML следующим образом:

render() {
   return (
        <div class={test-str}>
          <div  dangerouslySetInnerHTML={{__html: displayText}} />
        </div>
    )
}

или вы можете использовать JSX следующим образом:

let displayText = (<b> Name: </b> {this.name});

JSX позволяет нам писать HTML в React. JSX упрощает написание и добавление HTML в React