-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest.js
140 lines (124 loc) · 3.6 KB
/
test.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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
class App extends React.Component {
constructor() {
super();
this.state = { isOpen: false };
}
render() {
/*
<div>
<Head></Head>
<Content></Content>
<Footer></Footer>
</div>
*/
return React.createElement("div", null,
React.createElement(Head, null),
React.createElement(Content, null),
React.createElement(Footer, null));
}
}
class Head extends React.Component {
constructor() {
super();
this.state = {};
}
render() {
/**
<div class="header">header</div>
*/
return React.createElement("div", {
class: "header"
}, "通过 es6 写的一个 react 库");
}
}
const todos = [
{ id: 'job1', text: '1:重构淘宝' },
{ id: 'job2', text: '2:重构支付宝' },
{ id: 'job3', text: '3:重构阿里云' },
{ id: 'job4', text: '4:重构天猫' },
];
const todos1 = [
{ id: 'job2', text: '2:重构支付宝' },
{ id: 'job3', text: '3:重构阿里云' },
{ id: 'job1', text: '1:重构淘宝' },
{ id: 'job5', text: '5:重构大文娱' },
{ id: 'job4', text: '4:重构天猫' },
];
class Content extends React.Component {
constructor() {
super();
this.state = {
count: 0,
todos: todos
};
}
onPlus() {
this.setState({ count: this.state.count + 1 });
}
onSubtruct() {
this.setState({ count: this.state.count - 1 });
}
changTodos() {
this.setState({ todos: this.state.todos === todos ? todos1 : todos });
}
render() {
/**
<div class={this.state.count % 2===0 ? 'content-1' : 'content-2'}> {this.state.count}
{
this.state.count %2 ===0 ? <div>boy</div> : <span>girl</span>
}
<button onClick={this.onPlus.bind(this)}>+</button>
<button onClick={this.onSubtruct.bind(this)}>-</button>
</div>
*/
return React.createElement("div", null, React.createElement("div", {
class: "content"
},
React.createElement("p", null, "counter"),
React.createElement("div", {
class: this.state.count % 2 === 0 ? 'content-1' : 'content-2'
},
this.state.count,
React.createElement("button", {
style: 'display:inline:block;padding-left:5px;',
onClick: this.onPlus.bind(this)
}, "+"), React.createElement("button", {
onClick: this.onSubtruct.bind(this)
}, "-")),
React.createElement("div", {
style: 'padding-top:15px;',
}, React.createElement("p", null, "todo list"), React.createElement("button", {
onClick: this.changTodos.bind(this)
}, "\u53D8\u5316\u4EFB\u52A1\u987A\u5E8F"),
React.createElement("div", {
class: this.state.todos === todos ? 'content-1' : 'content-2'
}, this.state.todos.map(function (todo) {
return React.createElement("p", {
key: todo.key
}, todo.text);
})))));
}
}
class Footer extends React.Component {
constructor() {
super();
}
render() {
/**
<div class="footer">footer</div>
*/
return React.createElement("div", { class: 'footer' },
React.createElement('p', null, "仅供用于深入分析 react 实现原理，请勿用于生产环境。源码:"),
React.createElement('a', { href: "http://39.97.248.105:8088/react.js", target: '_blank' }, "1. react.js"),
React.createElement('br'),
React.createElement('a', { href: "http://39.97.248.105:8088/test.js", target: '_blank' }, "2. app.js"));;
}
}
React.render(App, document.getElementById('container'));
// function render(){
// return <App>
// <Head></Head>
// <Content></Content>
// <Footer></Footer>
// </App>
// }