如何使 Meteor React 内联 svg 元素单击页面链接而不刷新整个页面

Posted 2023-03-05

【中文标题】如何使 Meteor React 内联 svg 元素单击页面链接而不刷新整个页面

【英文标题】：How to make Meteor React inline svg element click link to page without refresh whole page

【发布时间】：2017-01-01 13:08:43

【问题描述】：

我需要一些指导。第一次来这里，所以可能我使用的一些“术语”很不寻常，请多多包涵。

我正在尝试实现 JSX 中的标题（使用 Meteor 平台）。目前，如果我在 svg 中使用 xlinkHref，当我单击元素时，它会打开链接，但会导致刷新整个页面。在 svg 之外（使用 href），它将打开链接而不刷新整个页面。代码示例：

import React,  Component  from 'react';

export default class App extends Component 

render() 
    return (
    <div>
        <svg>
            <a xlinkHref="/nextpage"> //clicking this will refresh whole page
            <circle cx="50" cy="50" r="40" fill="red" />
            </a>
            <circle cx="150" cy="50" r="40" fill="yellow" />
        </svg>
        <a href="/nextpage">Click to Next Page</a> //clicking this will not refresh
    </div>
    )

请注意，如果我将“a”标签包裹在 svg 标签之外，它肯定会起作用，但我只需要红色圆圈是可点击的。

我一直在考虑将圆形元素分解为单独的 svg，然后用“a”标签包装，但我只能说我无法做到这一点，我怎么能在不刷新整个页面的情况下仍然单击 svg 元素打开链接？

编辑：修正了一些代码错误

【参考方案1】：

您可以在您的圈子上添加 onclick 事件处理程序。

export default class App extends Component 

  onCircleClick(event) 

    event.preventDefault();
    console.log('Inside on circle click');
    window.location='/nextpage';
  

 render() 
 return (
 <div>
   <h1> Testing svg tag </h1>
   <svg>
     <circle onClick= this.onCircleClick cx="50" cy="50" r="40" fill="red"/>
     <circle onClick= this.onCircleClick cx="150" cy="50" r="40" fill="yellow" />
   </svg>
</div>
);

【讨论】：

嗨。你的解决方案对我不起作用。它将打开链接，但仍会刷新整个页面。我也测试了 svg 标签外的“onClick”属性，结果与上面相同。好像 event.preventDefault() 没有触发？

我认为您需要将点击处理程序绑定到组件，如下所示； this.onCircleClick.bind(this).

也试过了，添加 bind(this) 也不能如我所愿。 @tsega

【参考方案2】：

使用 React 路由器

通过使用 React Router 中的 browserHistory，您将能够在不刷新整个页面的情况下打开链接。

import React,  Component  from 'react';
import  browserHistory  from 'react-router';


export default class App extends Component 

  handleClick(link) 
    browserHistory.push(link);
  

  render() 
    return (
      <div>
        <svg>
          <a onClick=this.handleClick.bind(null, "/nextpage")>
            <circle cx="50" cy="50" r="40" fill="red" />
          </a>
        </svg>
      </div>
    )
  

browserHistory 在可用时使用 html5 History API，否则回退到完全刷新。 browserHistory 需要在服务器端进行额外配置才能提供 URL，但它是现代网页的普遍首选解决方案。

更多关于 React Router 的 API： https://github.com/ReactTraining/react-router/blob/master/docs/API.md#browserhistory

---

使用 history.pushState()

如果你不能使用 React Router，你仍然可以使用 HTML5 的 API pushstate 来改变路由：https://developer.mozilla.org/en-US/docs/Web/API/History_API

history.pushState(name, title, "nextpage");

请注意，历史记录与旧浏览器不兼容：http://caniuse.com/#search=history

---

配备 Meteor 路由器

应该可以使用history.pushState()。如果不是，路由器应该具有与 React Router 相同的 pushState 等价物。