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

Question

我需要一些指导。第一次使用这里，所以也许我使用的一些“术语”不太寻常，请耐心等待。

我正在尝试在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元素以打开链接而不刷新整个页面？

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

- Davies C C

Answer 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>
);
}
}

- AGdev

---

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

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

我也尝试过了，添加bind(this)也不像我想的那样工作。@tsega - Davies C C

Answer 2

使用React Router

通过使用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 历史 API，否则会回退到完全刷新。 browserHistory 需要在服务器端进行额外的配置以提供 URL，但通常是现代 Web 页面的首选解决方案。

更多关于 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 等效功能。

- Kalip