javascript - react : Stop page reload on clicking on anchor tag for scrolling

Question

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

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

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

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

有没有什么方法可以在不重新加载整个页面的情况下使用危险设置的 anchor 标记滚动到 React 中的部分页面？

编辑:使用以下版本:

"react": "^16.0.0", "react-router-dom": "^4.2.2"

Answer 1

你可以做的是在你的组件中添加一个 eventListener，它监听所有 href 的 anchor 标签。属性值以 # 开头.

在你的 componentDidMount() 里面方法，选择你所有的<a>标签在哪里 href="#..." .你可以用 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>

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