如何在反应中添加 target=_blank

Question

我需要让文本中的所有链接都打开一个新标签，文本来自 dangerouslySetInnerHTML={{__html: content,}}。代码在一个新的 class 中，它扩展了反应中的组件我在

中选择文本 ID 的代码块

Answer 1

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

Answer 2

您可以使用：

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

请参考

Answer 3

这是我使用 replace

的解决方案

var content = `<a href="https://whosebug.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>
    )
  } 
}

Answer 4

只需添加 rel="noopener noreferrer" 即可解决您的问题。

https://caniuse.com/?search=noopener%20

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

source

如何在反应中添加 target=_blank

how to add target=_blank on react

hyperlink

reactjs

react-native

gatsby