56 lines
1.1 KiB
JavaScript
56 lines
1.1 KiB
JavaScript
import React from 'react';
|
|
|
|
import Button from 'react-toolbox/lib/button';
|
|
|
|
import { StateTreeComponent } from './StateTree.js';
|
|
|
|
export class App extends StateTreeComponent
|
|
{
|
|
initialState = {
|
|
text: 'Not loaded',
|
|
loaded: false,
|
|
};
|
|
|
|
componentWillMount()
|
|
{
|
|
if (!this.state.loaded)
|
|
{
|
|
this.ctx.doQuery((d) => this.setState({ text: d.text, loaded: true }));
|
|
}
|
|
}
|
|
|
|
render()
|
|
{
|
|
return <div>
|
|
{this.state.text}
|
|
<Button raised primary label="Добавить плюсик" onClick={() => this.setState({ text: this.state.text+' +' })} />
|
|
<SubComponent
|
|
state={this.props.state.sub('sub')}
|
|
/>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
class SubComponent extends StateTreeComponent
|
|
{
|
|
initialState = {
|
|
text: 'Not loaded',
|
|
loaded: false,
|
|
}
|
|
|
|
componentWillMount()
|
|
{
|
|
if (!this.state.loaded)
|
|
{
|
|
this.ctx.doQuery((d) => this.setState({ text: d.text, loaded: true }));
|
|
}
|
|
}
|
|
|
|
render()
|
|
{
|
|
return <div>
|
|
SUB: {this.state.text}
|
|
</div>
|
|
}
|
|
}
|