React
HTML
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/react-yandex-maps.umd.production.min.js"></script>
<div id="app"></div>
<div id="test"></div>
React
const UserContext = React.createContext();
function withUser(Component) {
return function ConnectedComponent(props) {
return (
<UserContext.Consumer>
{user => <Component {...props} user={user} />}
</UserContext.Consumer>
);
};
}
class UserStore extends React.Component {
state = {
user: null,
isAuth: false,
returnTo: null
};
setReturn(url) {
this.setState({ returnTo: url });
}
checkAuthorization() {
const user = { name: "user name" };
this.setState({
user: user,
isAuth: true,
});
}
render() {
return (
<UserContext.Provider value={{
user: this.state.user,
returnTo: this.state.returnTo,
checkAuthorization: :: this.checkAuthorization,
isAuth: this.state.isAuth,
setReturn: :: this.setReturn
}}>
{this.props.children}
</UserContext.Provider>
);
}
}
class Root extends React.Component {
componentDidMount() {
const {
user: {
checkAuthorization,
setReturn
}
} = this.props;
checkAuthorization();
setReturn('to/test/url')
}
render() {
const { user } = this.props;
if (!user.user) return null;
return <div>{user.user.name} return to {user.returnTo}</div>
}
}
const App = withUser(Root);
ReactDOM.render(
<UserStore>
<App />
</UserStore>,
document.querySelector('#app')
);
//а где-то ещё есть компонент карты, которому нужен тот же самый юзер
class ForOtherUser extends React.Component {
componentDidMount() {
const {
user: {
checkAuthorization
}
} = this.props;
checkAuthorization();
}
render() {
const { user } =...