Используйте Stateful компоненты в маршрутизаторе React - PullRequest
Новая
       11

Используйте Stateful компоненты в маршрутизаторе React

0 голосов
/ 03 февраля 2019

Представьте себе приложение с вкладками, которые позволяют пользователю переключаться между различными областями, где пользователь может вводить различную информацию.

Я хочу создать компонент-коммутатор, который представляет эти вкладки, и отобразить другой компонент с информацией, связанной с пользователем, на основе текущего состояния маршрутизатора.Основная сложность заключается в том, что дочерний компонент является состоящим из состояния - они уже могут содержать некоторый текст, введенный пользователем.Я пытаюсь реализовать этот компонент с помощью простого 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> воссоздается каждый раз, когда пользователь переключается на другую ссылку.

Как сохранить состояние компонентов вэтот случай?

1 Ответ

0 голосов
/ 03 февраля 2019

Вы не можете.Маршрутизатор React отключает ненужные <Route> компоненты (из тех, которые не совпадают, только один <Route> компонент монтируется при использовании react-router).

...