解析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> 

沒有代碼，很難說出問題所在。 我在這里創建了一個有效的代碼段，可以幫助您調試問題。

根據評論更新了示例。