import React, { Component } from 'react'
import Head from './Head'
import Popular from './Popular'
import Movie from './Movie'
import Search from './Search'
class Flix extends Component {
constructor() {
super()
this.state = {
id : 0,
}
}
fetchDetails = (id) => {
this.setState({id : id})
}
render() {
var dialogue //this is an array which I pass to Head
if (this.state.id === 0) {
return (
<div>
<Head subHeading={dialogue} />
<Search />
<Popular fetchDetails={this.fetchDetails}/>
</div>
);
} else {
return (
<div>
<Head subHeading={dialogue} />
<Search/>
<Movie id={this.state.id} />
</div>
);
}
}
}
export default Flix;
因此，实际情况是，Popular 会显示热门电影列表，当用户点击一部电影时，它会返回该电影的“id”，并将其传递给 Movies 以显示有关所点击电影的更多信息。
整个系统工作正常，点击我得到了关于那部电影的更多细节，但我实现这个的方式是在开始时 id=0 所以，显示流行电影并且点击 id 更改为某个数字，而不是根据显示电影的详细信息。
我为此使用了简单的 if 语句。
我的问题是，由于没有后退按钮，如何实现一种方式，以便在用户获得详细信息后，他想返回到流行电影列表，直到他向下滚动流行电影列表。基本上就像一个后退按钮。
此时浏览器上的后退按钮不起作用。
最佳答案
在显示细节时获取窗口的偏移量，并用类似的东西将其保存到 tate 中:
this.setState ({
scrollOffset: window.scrollTop
})
然后一个按钮(或一个链接或任何你想要的组件)和 onClick 绑定(bind)一个简单的函数来完成这个:
handleButton = () => {
this.setState({
id: 0
});
window.scrollTo(0, this.state.scrollOffset);
}
关于javascript - 如何在 React 中的组件之间移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50865300/