Question

想象一下带有选项卡的应用程序，该选项卡允许用户在不同的区域之间切换，用户可以在其中输入不同的信息。

我想创建一个代表此选项卡的交换组件，并根据当前路由器状态用用户相关信息来呈现另一个组件。主要困难在于子组件是有状态的事实-它们已经可以包含用户输入的某些文本。我尝试通过以下方式用简单的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>。

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

Answer 1

不能。 React Router卸载不需要的<Route>组件（不匹配的组件，使用<Route>时只安装一个react-router组件）。

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

1 个答案: