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

【问题标题】：How to move between components in React如何在 React 中的组件之间移动
【发布时间】：2018-06-14 20:19:06
【问题描述】：

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 以显示有关所点击电影的更多信息。

整个系统正常工作，并且 onclick 我获得了有关该电影的更多详细信息，但我实现这一点的方式是在开始 id=0 时，显示热门电影和 onclick id 更改为某个数字，而不是根据显示电影详细信息。

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

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

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

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

在显示详细信息时获取窗口的偏移量并将其保存为：

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

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

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

【讨论】：

感谢您的帮助，我是否应该学习 React 路由器（因为我搜索答案的大多数问题似乎都在使用它）以在整个应用程序中更有效地做到这一点。

【解决方案2】：

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

对您的 URL 进行实际更改可能比您立即想要的更加雄心勃勃，但它确实打开了其他可能性，例如永久链接单个结果，同时仍将您的应用程序保持为单页应用程序。

【讨论】：