Question

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;

所以，正在发生的事情是，热门会显示一系列热门电影，当用户点击一部电影时，它会重新显示这些电影。该电影的内容将传递给电影以显示有关所点击电影的更多信息。

这个整个系统工作和onclick我得到关于那部电影的更多细节，但我实现这个的方式是，在开始id = 0所以，显示流行电影和onclick id更改为某些数字，而不是根据显示电影详细信息。

我为此使用了简单的if语句。

我的问题是因为没有后退按钮如何实现一种方式，以便在用户获得详细信息后，他想回到流行电影，直到他滚动下来的热门电影列表。基本上就像一个后退按钮。

此时浏览器上的后退按钮不起作用。

Answer 1

在显示详细信息时获取窗口的偏移量，并将其保存到tate，例如：

this.setState ({
   scrollOffset: window.scrollTop
})

然后一个按钮（或一个链接或你想要的任何组件）和onClick绑定一个简单的函数来执行此操作：

handleButton = () => {
    this.setState({
        id: 0 
    });
    window.scrollTo(0, this.state.scrollOffset);
}

Answer 2

如果您希望能够使用后退按钮，最好通过实施反应路由器（特别是react-router-dom，如果这是基于Web的）来实现。这是当前版本的一个很好的教程：https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf。然后，您可以根据浏览器路径设置状态。

填写对您的网址的实际更改可能比您想要的更加雄心勃勃，但它确实打开了其他可能性，例如将个别结果固定，同时仍将您的应用保持为单页应用。

如何在React中的组件之间移动

2 个答案: