[英]Parse nested HTML that's within a string in React?
I'm building a type ahead feature in React. 我正在React中构建一个类型提前功能。
I have wrapper component that has an array of objects, and it renders item
; 我有一个包装器组件,该组件具有一个对象数组,它渲染
item
; which's a stateless component. 这是一个无状态的组件。
So, suppose I have const name= 'Hasan'
. 所以,假设我有
const name= 'Hasan'
。 Which gets parsed to >> const parsedName = Ha<span>san</span>
; 哪个解析为>>
const parsedName = Ha<span>san</span>
; assuming the term to search for is san
. 假设要搜索的术语是
san
。
I have tried dangerouslySetInnerHTML={{ __html: parsedName }}
attribute on the parent element, but it didn't work. 我已经尝试在父元素上进行
dangerouslySetInnerHTML={{ __html: parsedName }}
属性,但是它没有用。
With plain html this would be:
el.innerHTML = parsedName
如果使用纯HTML,则将是:
el.innerHTML = parsedName
The goal is to style the span as desired. 目的是根据需要设置跨度的样式。 Any ideas?
有任何想法吗?
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>
Without code its hard to tell what's wrong. 没有代码,很难说出问题所在。 I have created a working snippet here that might help you debug your issue.
我在这里创建了一个有效的代码段,可以帮助您调试问题。
Updated the example based on the comment. 根据评论更新了示例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.