Consolidate ID Attribute Markup Generation
We have this really nice method for safely creating markup for an HTML attribute, `DOMPropertyOperations.createMarkupForProperty(...)`. Let's use it to create the ID attribute markup, too.
Tim Yung committed
Dec 20, 2013 at 17:58 UTC
9d119577eaf659238811f0315a1c7a0cf3c7fb3f
3 files changed
+27
-24
src/core/ReactDOMComponent.js
+5
-2
@@ -144,8 +144,11 @@ ReactDOMComponent.Mixin = {
144
}
145
}
146
147
- var escapedID = escapeTextForBrowser(this._rootNodeID);
148
- return ret + ' ' + ReactMount.ATTR_NAME + '="' + escapedID + '">';
147
+ var idMarkup = DOMPropertyOperations.createMarkupForProperty(
148
+ ReactMount.ATTR_NAME,
149
+ this._rootNodeID
150
+ );
151
+ return ret + ' ' + idMarkup + '>';
152
},
153
154
/**
src/core/ReactTextComponent.js
+6
-1
@@ -19,6 +19,7 @@
19
20
"use strict";
21
22
+var DOMPropertyOperations = require('DOMPropertyOperations');
23
var ReactComponent = require('ReactComponent');
24
var ReactMount = require('ReactMount');
25
@@ -64,8 +65,12 @@ mixInto(ReactTextComponent, {
65
transaction,
66
mountDepth
67
);
68
+ var idMarkup = DOMPropertyOperations.createMarkupForProperty(
69
+ ReactMount.ATTR_NAME,
70
+ rootID
71
+ );
72
return (
68
- '<span ' + ReactMount.ATTR_NAME + '="' + escapeTextForBrowser(rootID) + '">' +
73
+ '<span ' + idMarkup + '>' +
74
escapeTextForBrowser(this.props.text) +
75
'</span>'
76
);
src/core/__tests__/ReactEventTopLevelCallback-test.js
+16
-21
@@ -14,15 +14,12 @@
14
* limitations under the License.
15
*
16
* @emails react-core
17
+ * @jsx React.DOM
18
*/
19
20
'use strict';
21
22
require('mock-modules')
22
- .dontMock('ReactEventTopLevelCallback')
23
- .dontMock('ReactMount')
24
- .dontMock('ReactInstanceHandles')
25
- .dontMock('ReactDOM')
23
.mock('ReactEventEmitter');
24
25
var EVENT_TARGET_PARAM = 1;
@@ -30,25 +27,25 @@ var EVENT_TARGET_PARAM = 1;
27
describe('ReactEventTopLevelCallback', function() {
28
var React;
29
var ReactEventTopLevelCallback;
33
- var ReactDOM;
30
+ var ReactMount;
31
var ReactEventEmitter; // mocked
32
33
beforeEach(function() {
34
require('mock-modules').dumpCache();
35
React = require('React');
36
ReactEventTopLevelCallback = require('ReactEventTopLevelCallback');
40
- ReactDOM = require('ReactDOM');
37
+ ReactMount = require('ReactMount');
38
ReactEventEmitter = require('ReactEventEmitter'); // mocked
39
});
40
41
describe('Propagation', function() {
42
it('should propagate events one level down', function() {
43
var childContainer = document.createElement('div');
47
- var childControl = ReactDOM.div({}, 'Child');
44
+ var childControl = <div>Child</div>;
45
var parentContainer = document.createElement('div');
49
- var parentControl = ReactDOM.div({}, 'Parent');
50
- React.renderComponent(childControl, childContainer);
51
- React.renderComponent(parentControl, parentContainer);
46
+ var parentControl = <div>Parent</div>;
47
+ ReactMount.renderComponent(childControl, childContainer);
48
+ ReactMount.renderComponent(parentControl, parentContainer);
49
parentControl.getDOMNode().appendChild(childContainer);
50
51
var callback = ReactEventTopLevelCallback.createTopLevelCallback('test');
@@ -64,14 +61,14 @@ describe('ReactEventTopLevelCallback', function() {
61
62
it('should propagate events two levels down', function() {
63
var childContainer = document.createElement('div');
67
- var childControl = ReactDOM.div({}, 'Child');
64
+ var childControl = <div>Child</div>;
65
var parentContainer = document.createElement('div');
69
- var parentControl = ReactDOM.div({}, 'Parent');
66
+ var parentControl = <div>Parent</div>;
67
var grandParentContainer = document.createElement('div');
71
- var grandParentControl = ReactDOM.div({}, 'Parent');
72
- React.renderComponent(childControl, childContainer);
73
- React.renderComponent(parentControl, parentContainer);
74
- React.renderComponent(grandParentControl, grandParentContainer);
68
+ var grandParentControl = <div>Parent</div>;
69
+ ReactMount.renderComponent(childControl, childContainer);
70
+ ReactMount.renderComponent(parentControl, parentContainer);
71
+ ReactMount.renderComponent(grandParentControl, grandParentContainer);
72
parentControl.getDOMNode().appendChild(childContainer);
73
grandParentControl.getDOMNode().appendChild(parentContainer);
74
@@ -91,11 +88,9 @@ describe('ReactEventTopLevelCallback', function() {
88
89
it('should not fire duplicate events for a React DOM tree', function() {
90
var container = document.createElement('div');
94
- var inner = ReactDOM.div({}, 'Inner');
95
- var control = ReactDOM.div({}, [
96
- ReactDOM.div({id: 'outer'}, inner)
97
- ]);
98
- React.renderComponent(control, container);
91
+ var inner = <div>Inner</div>;
92
+ var control = <div><div id="outer">{inner}</div></div>;
93
+ ReactMount.renderComponent(control, container);
94
95
var callback = ReactEventTopLevelCallback.createTopLevelCallback('test');
96
callback({