![](/img/trans.png)
[英]How to Render a react component inside a dangerouslySetInnerHTML content?
[英]How to use <Link /> component inside dangerouslySetInnerHTML
目前我在我的一個組件中有這個:
{someObject.map(obj => (
<div
dangerouslySetInnerHTML={{
__html: obj.text
}}
/>
))}
基本上,我映射到另一個文件上的someObject
。 結構是這樣的:
export default someObject = [
{
obj: "<p>Some text 1.</p>"
},
{
obj: "<p>Some text 2.</p>"
}
]
我只是為了演示而簡化內容。 但是,我遇到了一個問題,因為我需要在其中一個項目中使用<Link />
組件。 如:
export default someObject = [
{
obj: "<p>Some text 1.</p>"
},
{
obj: "<p>Some text 2.</p>"
},
{
obj: "<p>Some text 2 and <Link to="/someroute">link</Link>.</p>"
}
]
但是,它不起作用,因為整個<p></p>
標記都包含在dangerouslySetInnerHTML
。
我可以使用簡單的<a></a>
標記作為鏈接,但這似乎不是一個好的解決方案,因為整個應用程序將重新加載而不是僅僅轉到另一個路由。
使這項工作的其他選擇是什么?
為什么不直接將對象導出為jsx對象? 我認為使用dangerouslySetInnerHTML
是一種不好的做法,它可能會導致XSS攻擊。
const someObject = [ { obj: <p>Some text 1.</p> }, { obj: <p>Some text 2.<a href="https://google.com">google</a></p> } ] class App extends React.Component { render(){ return ( <div className="App"> <h1>Hello world</h1> <h2>Jsx object goes here {someObject[1].obj}</h2> </div> )}; } const rootElement = document.getElementById("container"); ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script> <div id="container"> <!-- This element's contents will be replaced with your component. --> </div>
有兩種方法可以解決這個問題:
它就像一種更通用的方法,您可以使用它來選擇代碼。 嘗試使用此庫( https://github.com/tasti/react-linkify/ )
這是組件的簡單形式:
import React, {PropTypes} from 'react'; import Linkify from 'react-linkify'; export default class TextWithLink extends React.Component { constructor(props) { super(props); } render() { let text = this.props.text; if(this.props.showLink) { text = <Linkify properties={{target: '_blank', rel: "nofollow noopener"}}>{text}</Linkify> } return (<div>{text}</div>); } }
如果你想創建一個超鏈接( <a>
),你應該有一個構建元素並返回結果的函數。
示例:
list = { text: 'hello world', link: 'www.facebook.com' }
渲染函數可能是這樣的:
buildLink() { return( <p> {list.text}. <a href={list.link}>{list.link}</a> </p> ); } render() { return (this.buildLink()); }
export default someObject = [
{
obj: "<p>Some text 1.</p>"
},
{
obj: "<p>Some text 2.</p>"
},
{
obj: linkto('/someroute')
}
]
linkto將解決您的問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.