reactjs 如何在react上添加target=_blank

xzv2uavs  于 2023-01-17  发布在  React
关注(0)|答案(5)|浏览(206)

我需要使文本中的所有链接打开一个新标签页,而文本来自dangerouslySetInnerHTML={{__html:content,}}.代码在一个新的类中,它扩展了react中的组件,该代码块是我在其中拾取文本id的代码块< section>

laximzn5

laximzn51#

只需添加rel="noopener noreferrer"即可解决您的问题。
https://caniuse.com/?search=noopener%20

<a href="https://hasantezcan.dev" target="_blank" rel="noopener noreferrer">Go to website</a>

zhte4eai

zhte4eai2#

下面是我使用replace的解决方案

var content = `<a href="https://stackoverflow.com">Stack Overflow</a><a href="https://google.com">Google</a>`;

class App extends React.Component {

  render(){
    return (
      <div 
          dangerouslySetInnerHTML={{
              __html: content.replace(/href/g, "target='_blank' href")
          }}>
      </div>
    )
  } 
}
f5emj3cl

f5emj3cl3#

<Link to="route" target="_blank" onClick={(event) => {event.preventDefault(); window.open(this.makeHref("Your_route"));}} />

我是说

<Link ... target="_blank">

<a target='_blank' href={'Your_url'})}>Your Text</a>
h7appiyu

h7appiyu4#

您可以用途:

<Link to="route" target="_blank" onClick={(event) => {event.preventDefault(); window.open(this.makeHref("route"));}} />

请参考React-Router open Link in new tab

rryofs0p

rryofs0p5#

// to fix error in your console 
 <a target="_blank" rel="noreferrer" href={"url_link"}>Text</a>

相关问题