如何在反应中添加 target=_blank答案

【问题标题】：how to add target=_blank on react如何在反应中添加 target=_blank
【发布时间】：2021-01-08 07:09:40
【问题描述】：

我需要使文本中的所有链接打开一个新选项卡，并且文本来自危险的SetInnerHTML={{__html: content,}}。该代码位于一个新类中，该类在反应中扩展了组件我在

中选择文本 id 的代码块

【问题讨论】：

标签： reactjs react-native hyperlink gatsby

【解决方案1】：

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

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

source

【讨论】：

【解决方案2】：

这是我使用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>
    )
  } 
}

【讨论】：

【解决方案3】：

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

【讨论】：

我不能使用它，因为它不仅仅是静态文本上的链接，我有不同的帖子和不同的链接
好的，然后将您的动态 url 保存在一个状态并在路由中使用它们。例如 - {event.preventDefault(); window.open(this.makeHref({This.state.url}));}} />

【解决方案4】：

你可以使用：

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

请参考React-Router open Link in new tab

【讨论】：

它对每个链接都有效吗？我应该把它放在哪里？
是的，它应该适用于每个链接。请提供必要的代码 sn-ps，以便我们帮助您确定准确的放置位置。