React：管理菜单项和路由的状态

Question

我是 React 的新手。 我使用语义 UI 编写了一个简单的 React 应用程序，有两个菜单项，每个菜单项对应一个特定页面。 我不确定如何使每个页面都有自己的状态，并在导航菜单时记住它。

在 index.js 中：

ReactDOM.render(
    <Main />,
    document.getElementById('root')
);

在 Main.jsx 中：

export default class Main extends Component {
    state = {
        activePageId: 1
    };

    handleSelectPage = (e, { id: selectedPageId }) => {
        this.setState({ activePageId: selectedPageId })
    }

    getActivePage() {
        return (
            <Page id={this.state.activePageId} />
        )
    }

    render () {
        return (
            <Grid divided padded >
                <Grid.Column width={2}>
                    <Menu vertical inverted pointing fluid>
                        <Menu.Item
                            id={1}
                            name='Page 1'
                            active={this.state.activePageId === 1}
                            onClick={this.handleSelectPage}
                            key={1}
                        />
                        <Menu.Item
                            id={2}
                            name='Page 2'
                            active={this.state.activePageId === 2}
                            onClick={this.handleSelectPage}
                            key={2}
                        />
                    </Menu>
                </Grid.Column>
                <Grid.Column width={14}>
                    {this.getActivePage()}
                </Grid.Column>
            </Grid>
        );
    }
}

最后，在 Page.jsx 中：

export default class Page extends Component {
    state = {
        counter: 0
    };

    increaseCounter = (e) => {
        this.setState({ counter: this.state.counter + 1 });
    }

    render () {
        return (
            <React.Fragment>
                <Header>Page {this.props.id}</Header>
                {this.state.counter}
                <Button primary content='+' onClick={this.increaseCounter}/>
            </React.Fragment>
        );
    }
}

我想不通的是：

1. 在getActivePage()创建Page组件时，页面id在 props 中传递。 所以，每次我浏览菜单时都会发生变化。 但是， counter处于Page状态。 当我浏览菜单时，这不会改变。 我是否正确地假设只有一个Page实例，当道具（在这种情况下id ）更改时重新渲染它？

2. 似乎为每个页面设置单独计数器的唯一方法是拥有某种全局状态（在全局对象中）并在呈现Page时从中读取。 但是，这意味着我需要在Page.increaseCounter调用this.forceUpdate来重新呈现页面，而无需重新单击菜单项。 这是 React 的方式吗？

3. 我也在考虑使用路由。 但是，从我的初步实验来看，与当前场景相比，似乎将为每条路线创建一个具有自己状态的新Page （对吗？）。 但是，在路由之间导航时该状态会消失，所以我仍然需要保留一个全局状态对象并使用forceUpdates左右。 这里有什么想法吗？

谢谢！

Answer 1

您必须在 Main.jsx 组件中设置计数器状态，然后将计数器状态作为道具传递给 Page.jsx。 我建议您使用功能组件和 useState 钩子。 在这里你可以看到一个例子https://codesandbox.io/s/recursing-bardeen-8w58z?file=/src/App.js