The library for web and native user interfaces.
Bugfixes to key assignment
Type coersion bug and ID breaking assumption. Names need to be wrapped in something unique since otherwise two unique siblings can end up having IDs that are subsets of eachother.
CommitSyncScript committed
Jun 7, 2013 at 22:04 UTC
4bb966a7f08953083316ebacdefcd622c5bde99d
5 files changed
+20
-19
src/core/ReactComponent.js
+1
-1
@@ -296,7 +296,7 @@ var ReactComponent = {
296
if (child.length === 0) continue;
297
298
if (targetArray === null) targetArray = [];
299
- appendNestedChildren(i - 1, child, targetArray);
299
+ appendNestedChildren('' + (i - 1), child, targetArray);
300
301
} else if (!isEmptyChild(child)) {
302
src/core/__tests__/ReactIdentity-test.js
+10
-10
@@ -53,8 +53,8 @@ describe('ReactIdentity', function() {
53
React.renderComponent(instance, document.createElement('div'));
54
var node = instance.getDOMNode();
55
reactComponentExpect(instance).toBeDOMComponentWithChildCount(2);
56
- checkId(node.childNodes[0], '.reactRoot[0].:0:first');
57
- checkId(node.childNodes[1], '.reactRoot[0].:0:second');
56
+ checkId(node.childNodes[0], '.reactRoot[0].[0]{first}');
57
+ checkId(node.childNodes[1], '.reactRoot[0].[0]{second}');
58
});
59
60
it('should allow key property to express identity', function() {
@@ -67,8 +67,8 @@ describe('ReactIdentity', function() {
67
React.renderComponent(instance, document.createElement('div'));
68
var node = instance.getDOMNode();
69
reactComponentExpect(instance).toBeDOMComponentWithChildCount(2);
70
- checkId(node.childNodes[0], '.reactRoot[0].:apple');
71
- checkId(node.childNodes[1], '.reactRoot[0].:banana');
70
+ checkId(node.childNodes[0], '.reactRoot[0].[apple]');
71
+ checkId(node.childNodes[1], '.reactRoot[0].[banana]');
72
});
73
74
it('should use instance identity', function() {
@@ -89,12 +89,12 @@ describe('ReactIdentity', function() {
89
React.renderComponent(instance, document.createElement('div'));
90
var node = instance.getDOMNode();
91
reactComponentExpect(instance).toBeDOMComponentWithChildCount(3);
92
- checkId(node.childNodes[0], '.reactRoot[0].:wrap1');
93
- checkId(node.childNodes[0].firstChild, '.reactRoot[0].:wrap1.:squirrel');
94
- checkId(node.childNodes[1], '.reactRoot[0].:wrap2');
95
- checkId(node.childNodes[1].firstChild, '.reactRoot[0].:wrap2.:bunny');
96
- checkId(node.childNodes[2], '.reactRoot[0].:2');
97
- checkId(node.childNodes[2].firstChild, '.reactRoot[0].:2.:chipmunk');
92
+ checkId(node.childNodes[0], '.reactRoot[0].[wrap1]');
93
+ checkId(node.childNodes[0].firstChild, '.reactRoot[0].[wrap1].[squirrel]');
94
+ checkId(node.childNodes[1], '.reactRoot[0].[wrap2]');
95
+ checkId(node.childNodes[1].firstChild, '.reactRoot[0].[wrap2].[bunny]');
96
+ checkId(node.childNodes[2], '.reactRoot[0].[2]');
97
+ checkId(node.childNodes[2].firstChild, '.reactRoot[0].[2].[chipmunk]');
98
});
99
100
it('should let restructured components retain their uniqueness', function() {
src/core/__tests__/ReactMultiChildReconcile-test.js
+3
-2
@@ -42,10 +42,11 @@ var stripEmptyValues = function(obj) {
42
43
/**
44
* These children are wrapped in an array and therefore their keys are prefixed.
45
- * This relies on a tiny implementation detail of the rendering system.
45
+ * Their name is also wrapped in an prefix and suffix character. We strip those
46
+ * out. This relies on a tiny implementation detail of the rendering system.
47
*/
48
var getOriginalKey = function(childName) {
48
- return childName.substr(3);
49
+ return childName.substr(4, childName.length - 5);
50
};
51
52
/**
src/utils/__tests__/mapChildren-test.js
+4
-4
@@ -122,10 +122,10 @@ describe('mapChildren', function() {
122
.instance();
123
124
expect(mapFn.calls.length).toBe(3);
125
- expect(mapFn).toHaveBeenCalledWith(kidOne, 'one', 0);
126
- expect(mapFn).toHaveBeenCalledWith(kidTwo, 'two', 1);
127
- expect(mapFn).toHaveBeenCalledWith(kidThree, 'three', 2);
125
+ expect(mapFn).toHaveBeenCalledWith(kidOne, '0:one', 0);
126
+ expect(mapFn).toHaveBeenCalledWith(kidTwo, '0:two', 1);
127
+ expect(mapFn).toHaveBeenCalledWith(kidThree, '0:three', 2);
128
expect(rendered.props.children).not.toEqual(instance.props.children);
129
- expect(rendered.props.children).toHaveKeys(['one', 'two', 'three']);
129
+ expect(rendered.props.children).toHaveKeys(['0:one', '0:two', '0:three']);
130
});
131
});
src/utils/flattenChildren.js
+2
-2
@@ -56,7 +56,7 @@ var flattenChildrenImpl = function(res, children, nameSoFar) {
56
flattenChildrenImpl(
57
res,
58
child,
59
- nameSoFar + ':' + escapedKey
59
+ nameSoFar + '[' + escapedKey + ']'
60
);
61
}
62
} else {
@@ -80,7 +80,7 @@ var flattenChildrenImpl = function(res, children, nameSoFar) {
80
flattenChildrenImpl(
81
res,
82
children[key],
83
- nameSoFar + ':' + escapedKey
83
+ nameSoFar + '{' + escapedKey + '}'
84
);
85
}
86
}