import { Component } from 'react';
import { Injectable, Service } from 'rc-injectable';
@Injectable()
export class GrandChild extends Component {
get grandParent() {
return this.injector.get(GrandParent);
}
get sibling() {
return this.injector.get(Sibling);
}
render() {
return (
<dl>
<dt>come from GrandParent:</dt>
<dd>{this.grandParent.state.msg}
<button onClick={this.grandParent.updateMsg}>
click to update
</button>
</dd>
<dt>come from Sibling:</dt>
<dd>{this.sibling.msg}
<button onClick={this.sibling.updateMsg}>
click to update
</button>
</dd>
</dl>
);
}
}
@Injectable()
export class GrandParent extends Component {
state = {
msg: `I'm GrandParent`,
};
updateMsg() {
this.setState({
msg: 'updated',
});
}
render() {
return (
<Child/>
);
}
}
@Injectable()
export class Sibling extends Service {
msg = `I'm Sibling`;
updateMsg() {
this.msg = 'updated';
}
}