/
AppJSX.js
74 lines (60 loc) · 1.14 KB
/
AppJSX.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import Component, {Config} from 'metal-jsx';
class App extends Component {
render() {
return (
<div>
{'Go to:'}<a href="/metal-devtools/soy.html">{'Soy example'}</a>
<h1>{'JSX example'}</h1>
<Parent />
</div>
);
}
}
class Parent extends Component {
addChild() {
this.state.numOfChildren += 1;
}
render() {
const children = Array(this.state.numOfChildren).fill();
return (
<div style="padding-left: 16px;">
{'Parent:'}<button onClick={this.addChild.bind(this)}>{'Add a child!'}</button>
{
children.map(
(child, i) => (
<Child index={i} key={i} />
)
)
}
</div>
);
}
}
Parent.STATE = {
numOfChildren: Config.value(1)
};
class Child extends Component {
handleClick() {
this.state.subTree = true;
}
render() {
return (
<div style="padding-left:32px">
{`Child #${this.props.index}:`}
<button onClick={this.handleClick.bind(this)}>{'+'}</button>
{this.state.subTree &&
<div>
<Parent />
</div>
}
</div>
);
}
}
Child.PROPS = {
index: Config.number()
};
Child.STATE = {
subTree: Config.bool().value(false)
};
window.jsxApp = App;