gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 17:42:18 26 4
gpt4 key购买 nike

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

我尝试过库,包括 react-scrollable-anchor、react-anchor-link-smooth-scroll 和 react-scrollchor。他们都没有正常工作。我最多只能看到我的网址中有一个哈希标记,但页面根本不滚动。我必须使用 <section>标签以跳转到该部分。除此之外,我的页面根本没有移动。我假设我不需要 react 路由器来实现滚动。

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

我希望当我单击 anchor 标记时它应该滚动到 id 部分。如果这很重要,我的 React 版本是 16.5.2?

最佳答案

react-scrollable-anchor 库中的

ScrollableAnchor 在呈现时转发其子项的引用。

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

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

View Source

当可滚动 anchor 是用这样的无状态功能组件实现时

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

有一个控制台警告必须引起注意:

Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

Check the render method of ScrollableAnchor.

in Welcome (created by ScrollableAnchor)

in ScrollableAnchor (created by App)

in div (created by App)

in App

Refs 不允许在无状态组件上设置,因为它们没有实例。引用这个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 的版本,所以我建议考虑通知维护者并可能提供更新。

关于reactjs - react-scrollable-anchor 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53902292/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com