Блог

 lt;div  style={{ color: "white" }}  dangerouslySetInnerHTML={{  __html: `text lt;i style="color: red" gt;some data lt;/igt; not interesting`,  }}  /gt;  

Таким образом, это способ преобразования строки в html-элемент.

Это не то, что я пытаюсь сделать, потому что это опасно.

Например, я хочу, чтобы каждый экземпляр слова «дьявол» был окрашен в красный цвет в строке, отображаемой в div.

Как это можно сделать без преобразования текста в html-элемент?

Вы можете использовать replace метод выделения определенного слова вместе с глобальным атрибутом g для замены всех слов

 function highlight() {  var textHigh = document.getElementById("text")  textHigh.innerHTML = textHigh.innerHTML.replace(/ready/g, 'lt;i style="color: red"gt;readylt;/igt;') } highlight(); 

 lt;div id="text"gt;I am everready for every ready state to keep the work readylt;/divgt; 

Если вы хотите придерживаться реакции (без прямого изменения DOM), вы можете перебирать каждое слово/токен и заменять слово «дьявол lt;span className="devil"gt;devillt;spangt; «, но это усложняется пунктуацией и т. Д. Хотя это только начало. Я думаю, что решение @Rana, вероятно, лучше всего подходит для того, что вы хотите сделать.

 lt;div style={{ color: "white" }}gt;{  textblockyouprovide.split(" ").map(word=gt;word=="devil"?lt;span className="devil"gt;wordlt;/spangt;:word)  }lt;/divgt;