Разобрать вложенный HTML, который находится внутри строки в React?

Question

Я создаю функцию опережающего ввода в React.

У меня есть компонент-обертка, который имеет массив объектов, и он отображает item;это компонент без состояния.

Итак, предположим, у меня есть const name= 'Hasan'.Который разбирается до >> const parsedName = Ha<span>san</span>;предполагая, что термин для поиска равен san.

Я пробовал атрибут dangerouslySetInnerHTML={{ __html: parsedName }} на родительском элементе, но он не работал.

С простым html это будет: el.innerHTML = parsedName

Цель состоит в том, чтобы придать стилю желаемый размер. Есть идеи?

Answer 1

class Test extends React.Component {
  render() {
    const name = 'san';
    const parsedName = name.replace(new RegExp('san', 'ig'), '<span>span</span>');
    return (
    	<div dangerouslySetInnerHTML={{__html: parsedName}}/>
    );
  }
}

ReactDOM.render(
  <Test/>,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
</div>

Без кода сложно понять, что не так.Я создал рабочий фрагмент, который может помочь вам отладить вашу проблему.

Обновлен пример на основе комментария.