时间戳

首页 > 解决方案 > react-scrollable-anchor 无法正常工作

reactjs - react-scrollable-anchor 无法正常工作

问题描述

npm react-scrollable-anchor 由于某种原因无法正常工作。我只能在<section>标签中跳转到id属性，不知道为什么。

我尝试了一些库，包括 react-scrollable-anchor、react-anchor-link-smooth-scroll 和 react-scrollchor。他们都没有正常工作。我最多可以看到我的网址中有一个井号标签，但页面根本不滚动。我必须使用<section>标签才能跳转到该部分。除此之外，我的页面根本不动。我假设我不需要 react-router 来实现滚动。

import React, { Component } from 'react';
import { Button } from 'react-bootstrap';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import Welcome from './sections/welcome/welcome';
import Artists from './sections/artists/homepageArtists';

import ScrollableAnchor from 'react-scrollable-anchor';
import { configureAnchors } from 'react-scrollable-anchor'
import PropTypes from "prop-types";
import './Home.css';

const dots = [
{ className: 'navDots', name: 'Welcome', section: "#welcome", num: '1', to:"#welcome"},
{ className: 'navDots', name: 'Artists', section: "#artists", num: '2', to:"#artists"},
]

class PageSection extends Component {
    render() {
        return this.props.content;
    }
}

PageSection.propTypes = {
    content: PropTypes.node.isRequired
}

class Home extends Component {
    render() {

    return (
        <div>

            <div className="homepage">
                <div className="homepage-title">
                    <div className="dots-group">
                        {dots.map((dot) => (
                            <span className={dot.className} key={dot.name}>
                                <a href={dot.section}> go </a>
                            </span>
                        ))}
                    </div>
                </div>

            </div>


            <ScrollableAnchor id={"welcome"}>
                <PageSection content={<Welcome />} />
            </ScrollableAnchor>
            <ScrollableAnchor id={"artists"}>
                <PageSection content={<Artists />} />
            </ScrollableAnchor>

            <section id='welcome'>
                <PageSection content={<Welcome />} />
             </section>
             <section id='artists'>
                <PageSection content={<Artists />} />
             </section> 
        </div>
     }
   }
}

我希望当我单击锚标记时它应该滚动到 id 部分。如果这很重要，我的反应版本是 16.5.2？

标签： reactjs

解决方案

ScrollableAnchorin react-scrollable-anchorlibrary 在渲染时为其子级转发 refs。

render() {
  const {children, id} = this.props

  return React.cloneElement(children, {
    ref: children.ref || id,
  })
}

查看源代码

当使用无状态功能组件实现可滚动锚点时

const Welcome = props => {
  return (<div {...props}>Welcome!</div>)
}

const Artists = props => {
  return (<div {...props}>These are artists!</div>)
}

const App = () => (
  <div>
    <ScrollableAnchor id={"welcome"}>
      <Welcome style={{ height: 600 }}/>
    </ScrollableAnchor>
    <ScrollableAnchor id={"artists"}>
      <Artists style={{ height: 800 }} />
    </ScrollableAnchor>
  </div>
)

有一个必须注意的控制台警告：

警告：无状态函数组件不能被赋予 refs。尝试访问此 ref 将失败。

检查ScrollableAnchor.

在欢迎中（由 ScrollableAnchor 创建）

在 ScrollableAnchor 中（由 App 创建）

在 div 中（由 App 创建）

应用内

不允许在无状态组件上设置 Refs，因为它们没有实例。有关此问题的更多对话，请参阅此StackOverflow 答案。

要解决此警告，您可以将无状态组件实现为有状态组件，也可以创建一个有状态容器，如下所示：

class PageSection extends Component {
   render() {
     return this.props.content
   }
}
PageSection.propTypes = {
  content: PropTypes.node.isRequired
}

上面的PageSection有状态容器可以在 App 组件中使用，如下所示。

<ScrollableAnchor id={"welcome"}>
  <PageSection content={<Welcome style={{ height: 600 }}/>} />
</ScrollableAnchor>
<ScrollableAnchor id={"artists"}>
  <PageSection content={<Artists style={{ height: 800 }}/>} />
</ScrollableAnchor>

这是带有完整代码的StackBlitz 。

由于react-scrollable-anchor是为 React 15 开发的，它使用了已弃用的 API，ReactDOM例如findDOMNode可能在 React 16 的更高版本中删除的 API，因此我建议向维护人员通报这一点，并可能提供更新。

推荐阅读