如何在反应中添加 target=_blank

Posted

技术标签:

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

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

【参考方案1】：

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

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

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

source

【讨论】：

【参考方案2】：

这是我使用replace的解决方案

var content = `<a href="https://***.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，以便我们帮助您确定准确的放置位置。

以上是关于如何在反应中添加 target=_blank的主要内容，如果未能解决你的问题，请参考以下文章

如何在 PyQtWebEngine 中使用 target="_blank" 打开超链接？

不知道如何在代码中使用 target="_blank"

HTML 如何在XHTML和HTML Strict中正确使用target =“_ blank”

如何使用HTML实现点击一个链接打开新窗口49

Android WebView 在添加 WebViewClient 时忽略 target="_blank"

如何让电子应用程序打开以“http：//”或“https：//”开头的所有链接，并在浏览器中打开target =“_ blank”而不是app