如何在React中的組件之間移動
[英]How to move between components in React
問題描述
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;
因此，發生的事情是，“流行”顯示了流行電影的列表，當用戶單擊電影時，它會返回該電影的“ id”，並將其傳遞給“電影”以顯示有關所單擊電影的更多信息。
整個系統都可以正常運行，並且onclick我可以獲得有關該電影的更多詳細信息，但是我實現該方法的方式是，在開始id = 0時，顯示流行的電影並且onclick id更改為一些數字，而不是根據顯示的電影詳細信息。
我為此使用了簡單的if語句。
我的問題是，沒有后退按鈕，該如何實現用戶在獲取詳細信息后想要返回流行電影的位置，直到他向下滾動流行電影列表的方式。 基本上就像一個后退按鈕。
此時，瀏覽器上的后退按鈕不起作用。
2 個解決方案
解決方案1
4 2018-06-14 20:24:28
在顯示詳細信息時獲取窗口的偏移量，並通過類似以下方式將其保存到tate中：
this.setState ({
scrollOffset: window.scrollTop
})
然后，按鈕（或鏈接或所需的任何組件）和onClick綁定一個簡單的函數來執行此操作：
handleButton = () => {
this.setState({
id: 0
});
window.scrollTo(0, this.state.scrollOffset);
}
解決方案2
2 2018-06-14 20:26:09
如果您希望能夠使用“后退”按鈕，則最好通過實現react路由器（特別是基於Web的react-router-dom）來為您服務。 這是當前版本的一個很好的教程： https : //medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf 。 然后，您可以根據瀏覽器路徑設置狀態。
填寫對URL的實際更改可能比立即想要的要雄心勃勃，但是它確實打開了其他可能性，例如永久鏈接各個結果，同時仍將您的應用程序保留為單頁應用程序。
如何在React中的兩個組件之間移動項目
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.