Question

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

我尝试了一些库，其中包括react-scrollable-anchor，react-anchor-link-smooth-scroll和react-scrollchor。他们都没有正常工作。我最多可以看到url中有一个井号标记，但是页面根本没有滚动。我必须使用<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？

Answer 1

ScrollableAnchor库中的

react-scrollable-anchor在呈现时为其子代转发参考。

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

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

View Source

使用诸如此类的无状态功能组件实现滚动锚点时

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>
)

必须注意控制台警告：

警告：无状态功能组件无法提供引用。尝试访问此引用将失败。

检查ScrollableAnchor的呈现方法。

在“欢迎”中（由ScrollableAnchor创建）

在ScrollableAnchor中（由App创建）

在div中（由App创建）

在应用中

不允许在无状态组件上设置引用，因为它们没有实例。请参阅此StackOverflow answer，以获取有关此内容的更多讨论。

要解决此警告，您可以将无状态组件实现为有状态组件，或创建如下的有状态容器：

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开发的，它使用了ReactDOM之类的已弃用的API，例如findDOMNode，可能会在更高版本的React 16中删除，所以我建议通知维护者关于这一点，并可能提供更新。

react-scrollable-anchor无法正常工作

1 个答案: