我试图使用react-spring的视差创建一个react页面。我使用Web api来获取数据,因此当我使用视差标签时,im试图设置offset和scrollTo函数的值。如下所示;
class HomeComponent extends Component { constructor(props) { super(props); this.state = { list: [], categoryCount: '', }
} componentDidMount() { axios.get(http://localhost:9091/api/category
) .then(res => { this.setState({ list: res.data, categoryCount: res.data.length }) }); }
这些是我的摘要和Web api调用部分,下一部分是render();
render() { let i = 1 return <Parallax pages={this.state.categoryCount + 1} scrolling={true} vertical ref={ref => (this.parallax = ref)}> <span onClick={() => this.parallax.scrollTo(1)}>MAINPAGE {this.state.liste.map((category) => { return ( <span onClick={() => { this.parallax.scrollTo(i + 1) }}>{category.categoryName} {i += 1} {console.log(i)} ); })} }
所以在这段代码的一部分中,我正在映射列表以创建足够数量的视差图层。但是我无法管理偏移量和this.parallax.scroll()的值。这些家伙采用整数值来导航到每个其他。
我尝试了i和i + 1处理,但是变得很奇怪。第一个视差效果很好,它可以浏览第二页,但是在第一页之后,每个页面都可以将我导航到最后一页。我在stackoverflow中找不到相关的问题,所以我需要帮助感谢您的回答,对不起我的英语。
问题来源于stack overflow
在研究了堆栈闪电之后,我发现问题确实是“ i”值立即增加到列表的长度,因此,无论您单击除第一个以外的任何位置,您都将转到最后一页。
我在地图迭代中添加了一个listIndex值,并在那里增加了它。您可以遵循console.log语句以及屏幕上的打印内容。
这是一个可行的解决方案,但是我非常肯定有一种更优雅的方式来解决此问题(将其移入功能等)。
render() { let i = 1; return <Parallax pages={this.state.liste.length + 1} scrolling={true} vertical ref={ref => (this.parallax = ref)}> <span onClick={() => this.parallax.scrollTo(1)}>MAINPAGE {this.state.liste.map((category, listIndex) => { return ( <ParallaxLayer key={category.categoryId} offset={listIndex + 1} speed={0.5}> <span onClick={() => { this.parallax.scrollTo(listIndex + 1) }}>{category.categoryName} - test {listIndex += 1} {console.log(listIndex)} ); })} }
让我知道我是否可以提供其他帮助。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。