解析 React 中字符串中的嵌套 HTML？

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>

如果没有代码，很难分辨出哪里出了问题。我在这里创建了一个有效的 sn-p，可以帮助您调试问题。

根据评论更新了示例。