The library for web and native user interfaces.
Use ReactID.ATTR_NAME as the React-specific ID attribute name.
Another step in the plan towards making `ReactID.ATTR_NAME` the central source of truth regarding the React-specific ID attribute name.
CommitSyncScript committed
Jun 24, 2013 at 18:27 UTC
c1886c651365e1db415a9efd2d4e621eea20cf32
5 files changed
+20
-7
src/core/ReactID.js
+1
@@ -120,6 +120,7 @@ function purgeEntireCache() {
120
nodeCache = {};
121
}
122
123
+exports.ATTR_NAME = ATTR_NAME;
124
exports.getID = getID;
125
exports.setID = setID;
126
exports.getNode = getNode;
src/core/ReactMount.js
+1
@@ -55,6 +55,7 @@ function getReactRootID(container) {
55
*
56
* ReactMount.renderComponent(component, $('container'));
57
*
58
+ * TODO Update this comment when ReactID.ATTR_NAME changes.
59
* <div id="container"> <-- Supplied `container`.
60
* <div id=".reactRoot[3]"> <-- Rendered reactRoot of React component.
61
* // ...
src/core/ReactNativeComponent.js
+2
-1
@@ -24,6 +24,7 @@ var DOMPropertyOperations = require('DOMPropertyOperations');
24
var ReactComponent = require('ReactComponent');
25
var ReactEventEmitter = require('ReactEventEmitter');
26
var ReactMultiChild = require('ReactMultiChild');
27
+var ReactID = require('ReactID');
28
29
var escapeTextForBrowser = require('escapeTextForBrowser');
30
var flattenChildren = require('flattenChildren');
@@ -138,7 +139,7 @@ ReactNativeComponent.Mixin = {
139
}
140
}
141
141
- return ret + ' id="' + this._rootNodeID + '">';
142
+ return ret + ' ' + ReactID.ATTR_NAME + '="' + this._rootNodeID + '">';
143
},
144
145
/**
src/core/ReactTextComponent.js
+2
-1
@@ -20,6 +20,7 @@
20
"use strict";
21
22
var ReactComponent = require('ReactComponent');
23
+var ReactID = require('ReactID');
24
25
var escapeTextForBrowser = require('escapeTextForBrowser');
26
var mixInto = require('mixInto');
@@ -57,7 +58,7 @@ mixInto(ReactTextComponent, {
58
mountComponent: function(rootID) {
59
ReactComponent.Mixin.mountComponent.call(this, rootID);
60
return (
60
- '<span id="' + rootID + '">' +
61
+ '<span ' + ReactID.ATTR_NAME + '="' + rootID + '">' +
62
escapeTextForBrowser(this.props.text) +
63
'</span>'
64
);
src/environment/__tests__/ReactServerRendering-test.js
+14
-5
@@ -24,10 +24,12 @@
24
require('mock-modules')
25
.dontMock('ExecutionEnvironment')
26
.dontMock('React')
27
+ .dontMock('ReactID')
28
.dontMock('ReactServerRendering')
29
.dontMock('ReactTestUtils');
30
31
var React;
32
+var ReactID;
33
var ReactTestUtils;
34
var ReactServerRendering;
35
var ExecutionEnvironment;
@@ -36,6 +38,7 @@ describe('ReactServerRendering', function() {
38
beforeEach(function() {
39
require('mock-modules').dumpCache();
40
React = require('React');
41
+ ReactID = require('ReactID');
42
ReactTestUtils = require('ReactTestUtils');
43
ExecutionEnvironment = require('ExecutionEnvironment');
44
ExecutionEnvironment.canUseDOM = false;
@@ -51,7 +54,7 @@ describe('ReactServerRendering', function() {
54
}
55
);
56
expect(response).toMatch(
54
- '<span id="[^"]+">hello world</span>'
57
+ '<span ' + ReactID.ATTR_NAME + '="[^"]+">hello world</span>'
58
);
59
});
60
@@ -74,8 +77,12 @@ describe('ReactServerRendering', function() {
77
}
78
);
79
expect(response).toMatch(
77
- '<div id="[^"]+"><span id="[^"]+"><span id="[^"]+">My name is </span>' +
78
- '<span id="[^"]+">child</span></span></div>'
80
+ '<div ' + ReactID.ATTR_NAME + '="[^"]+">' +
81
+ '<span ' + ReactID.ATTR_NAME + '="[^"]+">' +
82
+ '<span ' + ReactID.ATTR_NAME + '="[^"]+">My name is </span>' +
83
+ '<span ' + ReactID.ATTR_NAME + '="[^"]+">child</span>' +
84
+ '</span>' +
85
+ '</div>'
86
);
87
});
88
@@ -123,8 +130,10 @@ describe('ReactServerRendering', function() {
130
);
131
132
expect(response).toMatch(
126
- '<span id="[^"]+"><span id="[^"]+">Component name: </span>' +
127
- '<span id="[^"]+">TestComponent</span></span>'
133
+ '<span ' + ReactID.ATTR_NAME + '="[^"]+">' +
134
+ '<span ' + ReactID.ATTR_NAME + '="[^"]+">Component name: </span>' +
135
+ '<span ' + ReactID.ATTR_NAME + '="[^"]+">TestComponent</span>' +
136
+ '</span>'
137
);
138
expect(lifecycle).toEqual(
139
['getInitialState', 'componentWillMount', 'render']