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

Question

我是 React 新手。我使用 Semantic 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>
        );
    }
}

我想不通的是：

页面id在getActivePage()中创建Page组件时在道具中传递。因此，每次我浏览菜单时都会发生变化。但是，counter 处于Page 的状态。当我浏览菜单时，这不会改变。我假设只有一个 Page 的实例是正确的吗？
似乎让每个页面都有一个单独的计数器的唯一方法是拥有某种全局状态（在全局对象中）并在呈现 Page 时从中读取。但是，这意味着我需要在 Page.increaseCounter 中调用 this.forceUpdate 来重新呈现页面，而无需重新单击菜单项。这是 React 的方式吗？
我也在考虑使用路由。但是，从我的初步实验来看，与当前情况相比，似乎会为每条路线（对吗？）创建一个新的 Page 并具有自己的状态。但是，在路线之间导航时该状态会消失，因此我仍然需要保留一个全局状态对象并使用 forceUpdates 左右。这里有什么想法吗？

谢谢！

Answer 1

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

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

React: Manage State of Menu Items and Routes

javascript

reactjs

react-router

semantic-ui

semantic-ui-react