forked from RubyLouvre/anu
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index8.html
108 lines (97 loc) · 2.75 KB
/
index8.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script type='text/javascript' src="./dist/React.js"></script>
<script type='text/javascript' src="./lib/ReactTestUtils.js"></script>
<!-- <script type='text/javascript' src="./test/react.js"></script>
<script type='text/javascript' src="./test/react-dom.js"></script>-->
<script type='text/javascript' src="./lib/babel.js"></script>
<script type="text/babel">
</script>
</head>
<body>
<pre>应该等于
</pre>
<h1 id='example' class="root">
</h1>
<script type='text/babel'>
var container = document.getElementById("example")
var div = container;
var PropTypes = React.PropTypes
if(!window.ReactDOM){
window.ReactDOM = React
}
var expect = function(a) {
return {
toBe: function(b) {
console.log(a,"vs", b, a === b)
},
toEqual(b){
console.log(a,"vs", b, a +""=== b+"")
},
}
}
function collectVDOM(vdom, array) {
console.log(vdom)
if (vdom.tag == 5) {
var children = [];
var element = {
type: vdom.type,
children: children
};
array.push(element)
var c = vdom._children;
for (var i in c) {
collectVDOM(c[i], children);
}
} else if (vdom.tag === 6) {
array.push( vdom.text +"");
} else {
var c = vdom._children;
for (var i in c) {
collectVDOM(c[i], array);
}
}
}
var ReactNoop = {
render(vdom) {
ReactDOM.render(vdom, div);
},
flush() { },
getChildren() {
var c = div.__component,
ret = [];
collectVDOM(c, ret);
return ret;
},
getText() {
return div.innerHTML.toLowerCase();
}
}
const Context = React.createContext(1);
function span(prop) {
return { type: 'span', children: [prop] };
}
function Consumer(props) {
return <Context.Consumer>{(value) => <span>{'Result: ' + value}</span>}</Context.Consumer>;
}
const Indirection = React.Fragment;
function App(props) {
return (
<Context.Provider value={props.value}>
<Indirection>
<Indirection>
<Consumer />
</Indirection>
</Indirection>
</Context.Provider>
);
}
//ReactDOM.render(<App value={2} />, div)
ReactNoop.render(<App value={3} />);
var a = ReactNoop.getChildren();
console.log(a)
</script>
</html>