时间戳

首页 > 解决方案 > 解析 React 中字符串中的嵌套 HTML？

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

问题描述

我正在 React 中构建一个预先输入的功能。

我有一个包含对象数组的包装器组件，它呈现item；这是一个无状态组件。

所以，假设我有const name= 'Hasan'. 解析为 >> const parsedName = Ha<span>san</span>; 假设要搜索的词是san.

我已经尝试过dangerouslySetInnerHTML={{ __html: parsedName }}父元素的属性，但它没有用。

使用纯 html 这将是：el.innerHTML = parsedName

目标是根据需要设置跨度的样式。有任何想法吗？

标签： javascriptreactjsparsing

解决方案

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>

没有代码，很难分辨出什么是错的。我在这里创建了一个工作片段，可以帮助您调试问题。

根据评论更新了示例。

推荐阅读