Как добавить цвет к определенной части строки в React, используя replace?

Question

Я бы хотел сделать все числа в строке красным, а затем отобразить их с помощью React.Вот что я пытаюсь сделать (я создал приложение, используя create-react-app и заменил содержимое App.js своим собственным):

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    const str = 'foo123bar';

    const strColor = 
      str.replace(/\d+/, match => <span style={{color: 'red'}}> {match} </span> );

    return (
      <div className="App">
        {strColor}
      </div>
    );
  }
}

export default App;

В результате только строка foo[object Object]barбыл визуализирован в окне просмотра.

Так как же добавить встроенный стиль в JSX?

Answer 1

Вы не можете вставить HTML в строку для отображения в React, это существует как защита от XSS.

То, что вы можете сделать в таком случае, выглядит примерно так:

const str = 'foo123bar';

const coloredStr = str.match(/\d+/);
const [before, after] = str.split(/\d+/)

return (
  <div className="App">
    {before}
    {coloredStr && coloredStr[0] && 
       <span style="color: red">{coloredStr[0]}</span>
    }
    {after}
  </div>
);

---

Для более сложного примера вам понадобится более сложная логика.Например, несколько частей могут быть стилизованы - вы можете найти все совпадения и несоответствующие части и поместить их в список в правильном порядке с индикатором, если вы используете диапазон или нет.Примерно так:

list.map((elem) => elem.isColored ? <span style="color: red">{elem.value}</span> : elem.value)

---

РЕДАКТИРОВАТЬ

Как уже упоминалось в комментариях, здесь есть реализация для нескольких элементов:

const str = 'foo123bar456baz897ban';
let strCopy = str;
const list = [];

while(strCopy) {
    const text = strCopy.split(/\d+/, 1)[0];
    list.push(text);
    const match = strCopy.match(/\d+/);
    if (!match) {
        break;
    }
    list.push(match[0]);
    strCopy = strCopy.substring(match.index + match[0].length);
}

return (
  <div className="App">
    {list.map((elem, index) => index % 2 === 0
         ? elem
         : <span style="color: red">{elem}</span>
    )}
  </div>
);

Answer 2

«Так как же добавить встроенный стиль в JSX?»

Чтобы ответить на заданный вами вопрос, ваша строка:

const strColor = str.replace(/\d+/, match => <span style={{color: 'red'}}> {match} </span> );

возвращает строку - поэтому оператор объекта style={{color: 'red'}}> не сбежит.

Вместо этого добавьте встроенный стиль с определением строки, укажите двойные кавычки и удалите фигурные скобки:
<span style="color: red"> {match} </span>

Можно добавить дополнительные стили, разделив пары ключ: значение с помощьюзапятые:
<span style="color: red, text-decoration: underline"> {match} </span>

Обратите внимание, что это не сработает
Вопрос, на который вы действительно пытаетесь ответить, состоит в том, как заменить части строкис компонентом (в данном случае тегом <span> со стилем. Эта проблема задокументирована на странице ответов о проблемах github, обратите внимание, что существует множество вариантов, не требующих от вас опасной установки внутреннего HTML-кода, как отмечалось в нескольких предыдущих ответах: https://github.com/facebook/react/issues/3386

Answer 3

Мне удалось решить эту проблему с помощью «dangerouslySetInnerHTML».

class App extends React.Component {
  render() {
      let str = 'foo123bar';

      const strColor = str.replace(/\d+/, match => `<span style="color: red">${match} </span>` );

    return (
        <div className="App"
         dangerouslySetInnerHTML={{__html: 
          strColor}}>
      </div>
);

}}