reactjs - 在 React 路由器中使用有状态组件

问题描述

想象一下带有标签的应用程序，它允许用户在用户可以输入不同信息的不同区域之间切换。

我想创建一个表示此选项卡的开关组件，并根据当前路由器状态呈现具有用户相关信息的另一个组件。主要困难在于子组件是有状态的——它们已经可以包含用户输入的一些文本。我尝试通过react-router以下方式简单地实现这个组件：

class Application extends React.PureComponent {
    public render(): React.ReactNode {
        const items = ["A", "B", "C"];
        return (
            <div>
                <header>
                    <ul>
                        {items.map((item, i) =>
                            (<li key={i}>
                                <Link to={"/" + item}>{item}</Link>
                            </li>))
                        }
                    </ul>
                </header>
                <SwitchComponent items={items}/>
            </div>
        );
    }
}

class SwitchComponent extends React.PureComponent<{items: string[]}> {
    public render(): React.ReactNode {
        const { items } = this.props;
        return (
            <Switch>
                {items.map((item, index) =>
                    <Route key={index} path={"/" + item} render={
                        () => (<StatefulComponent {...item}/>)
                    }/>)
                }
            </Switch>
        );
    }
}

class StatefulComponent extends React.PureComponent<{}, {text: string}> {
    public state = {
        text: "",
    };
    public onChange(text: string) {
        this.setState({text});
    }
    public render(): React.ReactNode {
        const { text } = this.state;
        return (
            <input value={text} onChange={
                (event) => this.onChange.bind(this)(event.target.value)}
            />
        );
    }
}

在这里，我实现了一个简单的Application组件，其中包含通过组件实现的导航区域<Link>和包含路由切换的内容区域。

此实现不保留<StatefulComponent>状态，因为<SwitchComponent>每次用户切换到另一个链接时都会重新创建。

在这种情况下，如何保留组件的状态？

标签： reactjsreact-routerstateful

reactjs - 在 React 路由器中使用有状态组件

问题描述

解决方案

推荐阅读