在使用dangerouslySetInnerHtml呈現內容時如何使用React鏈接？

Question

所以我正在為反應應用程序開發一個博客頁面。 頁面正在從CMS加載數據，博客帖子的內容是原始html，我在頁面上呈現：

<div dangerouslySetInnerHTML={{__html: this.state.content}} />

但是，我在<a href='/'>Home Page</a>中添加的任何鏈接都不使用react路由器，而是觸發重新加載頁面。

有沒有辦法處理這個反應，而不必解析HTML並用<Link>替換<a>標簽？

Answer 1

您可以在HTML容器上使用單擊處理程序來捕獲點擊次數。 如果單擊源自<a>標記（或子標記），則可以防止默認，並使用href 。

在這種情況下，您可以使用react-router的withRouter來獲取history對象，並使用push方法通知路由器。 您也可以編輯網址，或以其他方式操縱網址。

示例（在使用代碼時取消注釋並刪除控制台）：

 // import { withRouter } from 'react-router-dom' class HTMLContent extends React.Component { contentClickHandler = (e) => { const targetLink = e.target.closest('a'); if(!targetLink) return; e.preventDefault(); console.log(targetLink.href); // this.props.history.push(e.target.href) }; render() { return ( <div onClick={this.contentClickHandler} dangerouslySetInnerHTML={{__html: this.props.content}} /> ); } } // export default withRouter(HTMLContent); const content = `<div> <a href="http://www.first-link.com">Link 1</a> <a href="http://www.second-link.com"><span>Link 2</span></a> </div>`; ReactDOM.render( <HTMLContent content={content} />, demo ); 

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="demo"></div>