反应：单击锚标记以进行滚动时停止页面重新加载

Question

我目前正在使用 react 来创建一个维基百科风格的网站。出于数据输入的原因，我从数据库中获取整个 HTML，然后使用 dangerouslySetInnerHTML 设置其中的一部分，如下所示：

dangerouslySetInnerHTML={{ __html: this.props.section.text }}

现在页面的其他部分播放了视频，但是每次我单击<a href="#id> 样式标签（使用数据库设置）导航到同一页面的另一部分，整个页面刷新。

这会产生问题，因为视频也会重新加载并从头开始播放。

有没有什么方法可以在 React 中使用危险设置的锚标记滚动到页面的某些部分而无需重新加载整个页面？

编辑：使用以下版本：

“react”：“^16.0.0”，“react-router-dom”：“^4.2.2”

Answer 1

你可以做的是向你的组件添加一个 eventListener 来监听所有 href 属性值以 # 开头的锚标签。

在componentDidMount() 方法中，选择href="#..." 所在的所有<a> 标签。您可以使用document.querySelectorAll("a[href^='#']") 执行此操作。这将返回一个包含所有匹配节点的数组。然后，您可以遍历它们并为每个附加一个 eventListener。

eventListener 将监听click 并运行一个阻止默认行为的函数（重定向到另一个页面），然后推送到您的路由器。 （删除下面的评论）

class MyApp extends React.Component {

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    document.querySelectorAll("a[href^='#']").forEach(node => {
      node.addEventListener('click', e => {
        e.preventDefault();
        console.log(e.target.href);
        //this.props.history.push(e.target.href);
      });
    })
  }
 
  render() {
    const myMarkup = "<ul><li><a href='#'>Page link 1</a></li><li><a href='#test'>Page link 2</a></li><li><a href='https://google.com'>External link</a></li></ul>";
    return(
      <div id="container" dangerouslySetInnerHTML={{__html: myMarkup}}></div>
    );
  }
}
 
ReactDOM.render(<MyApp />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

上面的 sn-p 假设您使用的是withRouter HOC。否则推送将不起作用。有关详细信息，请参阅我对 How to push to History in React Router v4? 的回复。

Answer 2

捕获默认事件处理程序并自己处理事件处理。你可以把它放在 componentDidMount 生命周期钩子中。还要在 componentWillUnmount 中删除这些处理程序

var aTags = document.querySelectorAll('a[href]'); //use apt selector for you section


     aTags.forEach(aTag =>aTag.addEventListener('click',function(e){
          e.preventDefault();
          e.nativeEvent.stopImmediatePropagation()
          e.stopPropagation()
          var href = e.target.href;
          history.pushState({},'',href);
        }));

Answer 3

要添加@Shishir Arora 所说的内容，而不是使用history.pushState({},'',href);，请使用document.getElementById(hash.replace('#', '')).scrollIntoView(); 之类的内容。

这是我利用 jQuery 的完整组件的代码：

import React, { useEffect } from 'react';
import $ from 'jquery';

const handleAnchorClick = e => {
  e.preventDefault();
  e.stopPropagation();

  const hash = e.currentTarget.hash;
  document.getElementById(hash.replace('#', '')).scrollIntoView();
  // Alternatively use jQuery for the above line: $(hash).get(0).scrollIntoView();
};

export default ({ response, url, search }) => {
  useEffect(() => {
    $('#article-content').on('click', 'a[href^="#"]', handleAnchorClick);

    return () => {
      $('#article-content').off('click', 'a[href^="#"]', handleAnchorClick);
    };
  }, [response]);

  return (
    <div>
      <div id='article-content' dangerouslySetInnerHTML={{__html: response}} />
    </div>
  );
};

jQuery 有助于捕获 currentTarget，由于标签中嵌套了一个元素，因此 @Shishir 的原始答案不会以相同的方式捕获该 currentTarget。

Answer 4

由于您的问题带有“react-router”标签，我假设您在应用程序中使用它，我还假设您使用的是 v4.x 的最新版本。

我过去解决这个问题的方法是使用React Router Hash link 包。正如他们的文档中所述，您可以这样使用它（将您的 <a href="#id"> 替换为 <Link>）：

// In YourComponent.js
...
import { HashLink as Link } from 'react-router-hash-link';
...
// Use it just like a RRv4 link (to can be a string or an object, see RRv4 api for details):
<Link to="/some/path#with-hash-fragment">Link to Hash Fragment</Link>

Answer 5

既然您使用的是 React Router v4，为什么不使用Link？

...
import { Link } from 'react-router-dom';
... 
<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }
}}/>

您可以找到文档here。