@@ -36,7 +36,9 @@ class ClickCounter extends React.Component {
36
36
< div
37
37
className = "clickLogDiv"
38
38
key = { 'clickLog' + i }
39
- ref = { 'clickLog' + i }
39
+ ref = { current => {
40
+ this . refs [ 'clickLog' + i ] = current ;
41
+ } }
40
42
/> ,
41
43
) ;
42
44
}
@@ -73,7 +75,11 @@ class TestRefsComponent extends React.Component {
73
75
< div >
74
76
< div
75
77
ref = { current => {
76
- this . refs . resetDiv = current ;
78
+ if ( current === null ) {
79
+ delete this . refs . resetDiv ;
80
+ } else {
81
+ this . refs . resetDiv = current ;
82
+ }
77
83
} }
78
84
onClick = { this . doReset } >
79
85
Reset Me By Clicking This.
@@ -94,15 +100,6 @@ class TestRefsComponent extends React.Component {
94
100
}
95
101
}
96
102
97
- const expectClickLogsLengthToBe = function ( instance , length ) {
98
- const clickLogs = ReactTestUtils . scryRenderedDOMComponentsWithClass (
99
- instance ,
100
- 'clickLogDiv' ,
101
- ) ;
102
- expect ( clickLogs . length ) . toBe ( length ) ;
103
- expect ( Object . keys ( instance . refs . myCounter . refs ) . length ) . toBe ( length ) ;
104
- } ;
105
-
106
103
describe ( 'reactiverefs' , ( ) => {
107
104
let container ;
108
105
@@ -149,22 +146,47 @@ describe('reactiverefs', () => {
149
146
'clickIncrementer' ,
150
147
) ;
151
148
152
- expectClickLogsLengthToBe ( testRefsComponent , 1 ) ;
149
+ let clickLogs = ReactTestUtils . scryRenderedDOMComponentsWithClass (
150
+ testRefsComponent ,
151
+ 'clickLogDiv' ,
152
+ ) ;
153
+ expect ( clickLogs . length ) . toBe ( 1 ) ;
154
+ expect ( Object . keys ( testRefsComponent . refs . myCounter . refs ) ) . toHaveLength ( 1 ) ;
153
155
154
156
// After clicking the reset, there should still only be one click log ref.
155
157
testRefsComponent . refs . resetDiv . click ( ) ;
156
- expectClickLogsLengthToBe ( testRefsComponent , 1 ) ;
158
+ clickLogs = ReactTestUtils . scryRenderedDOMComponentsWithClass (
159
+ testRefsComponent ,
160
+ 'clickLogDiv' ,
161
+ ) ;
162
+ expect ( clickLogs . length ) . toBe ( 1 ) ;
163
+ expect ( Object . keys ( testRefsComponent . refs . myCounter . refs ) ) . toHaveLength ( 1 ) ;
157
164
158
165
// Begin incrementing clicks (and therefore refs).
159
166
clickIncrementer . click ( ) ;
160
- expectClickLogsLengthToBe ( testRefsComponent , 2 ) ;
167
+ clickLogs = ReactTestUtils . scryRenderedDOMComponentsWithClass (
168
+ testRefsComponent ,
169
+ 'clickLogDiv' ,
170
+ ) ;
171
+ expect ( clickLogs . length ) . toBe ( 2 ) ;
172
+ expect ( Object . keys ( testRefsComponent . refs . myCounter . refs ) ) . toHaveLength ( 2 ) ;
161
173
162
174
clickIncrementer . click ( ) ;
163
- expectClickLogsLengthToBe ( testRefsComponent , 3 ) ;
175
+ clickLogs = ReactTestUtils . scryRenderedDOMComponentsWithClass (
176
+ testRefsComponent ,
177
+ 'clickLogDiv' ,
178
+ ) ;
179
+ expect ( clickLogs . length ) . toBe ( 3 ) ;
180
+ expect ( Object . keys ( testRefsComponent . refs . myCounter . refs ) ) . toHaveLength ( 3 ) ;
164
181
165
182
// Now reset again
166
183
testRefsComponent . refs . resetDiv . click ( ) ;
167
- expectClickLogsLengthToBe ( testRefsComponent , 1 ) ;
184
+ clickLogs = ReactTestUtils . scryRenderedDOMComponentsWithClass (
185
+ testRefsComponent ,
186
+ 'clickLogDiv' ,
187
+ ) ;
188
+ expect ( clickLogs . length ) . toBe ( 1 ) ;
189
+ expect ( Object . keys ( testRefsComponent . refs . myCounter . refs ) ) . toHaveLength ( 3 ) ;
168
190
} ) ;
169
191
} ) ;
170
192
@@ -230,15 +252,21 @@ describe('ref swapping', () => {
230
252
< div >
231
253
< div
232
254
className = "first"
233
- ref = { count % 3 === 0 ? 'hopRef' : 'divOneRef' }
255
+ ref = { current => {
256
+ this . refs [ count % 3 === 0 ? 'hopRef' : 'divOneRef' ] = current ;
257
+ } }
234
258
/>
235
259
< div
236
260
className = "second"
237
- ref = { count % 3 === 1 ? 'hopRef' : 'divTwoRef' }
261
+ ref = { current => {
262
+ this . refs [ count % 3 === 1 ? 'hopRef' : 'divTwoRef' ] = current ;
263
+ } }
238
264
/>
239
265
< div
240
266
className = "third"
241
- ref = { count % 3 === 2 ? 'hopRef' : 'divThreeRef' }
267
+ ref = { current => {
268
+ this . refs [ count % 3 === 2 ? 'hopRef' : 'divThreeRef' ] = current ;
269
+ } }
242
270
/>
243
271
</ div >
244
272
) ;
@@ -482,18 +510,11 @@ describe('root level refs', () => {
482
510
} ) ;
483
511
} ) ;
484
512
485
- describe ( 'creating element with ref in constructor' , ( ) => {
513
+ describe ( 'creating element with string ref in constructor' , ( ) => {
486
514
class RefTest extends React . Component {
487
515
constructor ( props ) {
488
516
super ( props ) ;
489
- this . p = (
490
- < p
491
- ref = { current => {
492
- this . refs . p = current ;
493
- } } >
494
- Hello!
495
- </ p >
496
- ) ;
517
+ this . p = < p ref = "p" > Hello!</ p > ;
497
518
}
498
519
499
520
render ( ) {
0 commit comments