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

How to make Meteor React inline svg element click link to page without refresh whole page

本文关键字：刷新 链接 React Meteor 何使 内联 svg 元素      更新时间：2023-09-26

我需要一些指导。第一次来这里，所以可能我使用的一些"术语"是不寻常的，请原谅我。

我正在努力实现什么标题说在JSX(使用流星平台)。目前，如果我在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元素打开链接而不刷新整个页面?

编辑:修正了一些代码错别字

你可以在你的圆圈上添加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>
);
}
}

与反应路由器

通过使用来自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，但它通常是现代网页的首选解决方案。

更多关于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

与一个路由器流星

应该能够使用history.pushState()。如果没有，路由器就应该像React router那样有一个等价的pushState。

相关文章：