anu/index5.html at master · nichelove/anu · GitHub

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
<!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="./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'>
  var s
  window.onload = function(){
    var arr = ['111', '222', '333']
    var div = document.body
    class App extends React.Component {

        getChildContext() {
            return {
                name: "Jonas",
                fruit: "Banana"
            };
        }
        handleClick() {
            this.getChildContext = function () {
                return {
                    name: "Jonas",
                    fruit: arr.shift()
                };
            }
            this.forceUpdate()

        }
        render() {
            return <div ref='a' onClick={this.handleClick.bind(this)}><h4>{new Date - 0}</h4><B /></div>;
        }
    }
    App.childContextTypes = {
        name: React.PropTypes.string,
        fruit: React.PropTypes.string
    }

    class B extends React.Component {

        render() {
            console.log("B", this.context.fruit)
            return <div><C /><strong>{this.context.fruit}</strong></div>;
        }
    }
    B.contextTypes = {
        fruit: React.PropTypes.string
    }
    class C extends React.Component {
        render() {
            console.log("C", this.context.fruit)
            return <em>{this.context.fruit}</em>;
        }
    }

   s = ReactDOM.render(<App />, div)
    /*
    await browser
        .pause(100)
        .$apply()
    var strongs = div.getElementsByTagName('strong')
    expect(strongs[0].innerHTML).toBe('Banana')
    expect(strongs[1].innerHTML).toBe('Banana')
    await browser.click(s.refs.a).pause(100)
        .$apply()
    strongs = div.getElementsByTagName('strong')
    expect(strongs[0].innerHTML).toBe('111')
    expect(strongs[1].innerHTML).toBe('111')
    await browser.click(s.refs.a).pause(100)
        .$apply()
    strongs = div.getElementsByTagName('strong')
    expect(strongs[0].innerHTML).toBe('222')
    expect(strongs[1].innerHTML).toBe('222')
    */

  }
  </script>

</head>
<body>

        <div>开发者工具</div>
        <div id='example'></div>


</body>

 </html>