Don't use React.DOM
I grepped for uses of React.DOM. This is going to be a set of helper functions to generate ReactElements without JSX. They're not classes so they cannot be used where a React class is expected. Since we always use JSX, we should have no internal use for these helpers. We can use strings instead.
Sebastian Markbage committed
Oct 7, 2014 at 10:26 UTC
15a0c8920ecd91a636cd1a7df3a79a42fc21d086
7 files changed
+27
-19
src/addons/transitions/ReactTransitionGroup.js
+2
-2
@@ -29,13 +29,13 @@ var ReactTransitionGroup = React.createClass({
29
displayName: 'ReactTransitionGroup',
30
31
propTypes: {
32
- component: React.PropTypes.func,
32
+ component: React.PropTypes.any,
33
childFactory: React.PropTypes.func
34
},
35
36
getDefaultProps: function() {
37
return {
38
- component: React.DOM.span,
38
+ component: 'span',
39
childFactory: emptyFunction.thatReturnsArgument
40
};
41
},
src/browser/ui/ReactMount.js
+4
-1
@@ -345,9 +345,12 @@ var ReactMount = {
345
ReactDescriptor.isValidDescriptor(nextDescriptor),
346
'renderComponent(): Invalid component descriptor.%s',
347
(
348
+ typeof nextDescriptor === 'string' ?
349
+ ' Instead of passing an element string, make sure to instantiate ' +
350
+ 'it by passing it to React.createElement.' :
351
ReactDescriptor.isValidFactory(nextDescriptor) ?
352
' Instead of passing a component class, make sure to instantiate ' +
350
- 'it first by calling it with props.' :
353
+ 'it by passing it to React.createElement.' :
354
// Check if it quacks like a descriptor
355
typeof nextDescriptor.props !== "undefined" ?
356
' This may be caused by unintentionally loading two independent ' +
src/browser/ui/__tests__/ReactMount-test.js
+7
-5
@@ -38,15 +38,17 @@ describe('ReactMount', function() {
38
});
39
});
40
41
- it('throws when given a factory', function() {
41
+ it('throws when given a string', function() {
42
expect(function() {
43
- ReactTestUtils.renderIntoDocument(React.DOM.div);
43
+ ReactTestUtils.renderIntoDocument('div');
44
}).toThrow(
45
'Invariant Violation: renderComponent(): Invalid component descriptor. ' +
46
- 'Instead of passing a component class, make sure to instantiate it ' +
47
- 'first by calling it with props.'
46
+ 'Instead of passing an element string, make sure to instantiate it ' +
47
+ 'by passing it to React.createElement.'
48
);
49
+ });
50
51
+ it('throws when given a factory', function() {
52
var Component = React.createClass({
53
render: function() {
54
return <div />;
@@ -57,7 +59,7 @@ describe('ReactMount', function() {
59
}).toThrow(
60
'Invariant Violation: renderComponent(): Invalid component descriptor. ' +
61
'Instead of passing a component class, make sure to instantiate it ' +
60
- 'first by calling it with props.'
62
+ 'by passing it to React.createElement.'
63
);
64
});
65
src/core/__tests__/ReactCompositeComponent-test.js
+6
-6
@@ -196,11 +196,11 @@ describe('ReactCompositeComponent', function() {
196
var instance1 =
197
<TogglingComponent
198
firstComponent={null}
199
- secondComponent={React.DOM.div}
199
+ secondComponent={'div'}
200
/>;
201
var instance2 =
202
<TogglingComponent
203
- firstComponent={React.DOM.div}
203
+ firstComponent={'div'}
204
secondComponent={null}
205
/>;
206
@@ -223,11 +223,11 @@ describe('ReactCompositeComponent', function() {
223
var instance1 =
224
<TogglingComponent
225
firstComponent={null}
226
- secondComponent={React.DOM.script}
226
+ secondComponent={'script'}
227
/>;
228
var instance2 =
229
<TogglingComponent
230
- firstComponent={React.DOM.script}
230
+ firstComponent={'script'}
231
secondComponent={null}
232
/>;
233
@@ -264,13 +264,13 @@ describe('ReactCompositeComponent', function() {
264
265
var instance1 =
266
<TogglingComponent
267
- firstComponent={React.DOM.div}
267
+ firstComponent={'div'}
268
secondComponent={Child}
269
/>;
270
var instance2 =
271
<TogglingComponent
272
firstComponent={Child}
273
- secondComponent={React.DOM.div}
273
+ secondComponent={'div'}
274
/>;
275
276
expect(function() {
src/core/__tests__/ReactMultiChildText-test.js
+1
-1
@@ -94,7 +94,7 @@ var expectChildren = function(d, children) {
94
var elementDOMNode =
95
reactComponentExpect(d)
96
.expectRenderedChildAt(i)
97
- .toBeComponentOfType(React.DOM.div)
97
+ .toBeComponentOfType('div')
98
.instance()
99
.getDOMNode();
100
src/core/__tests__/ReactPropTransferer-test.js
+3
-3
@@ -59,7 +59,7 @@ describe('ReactPropTransferer', function() {
59
60
reactComponentExpect(instance)
61
.expectRenderedChild()
62
- .toBeComponentOfType(React.DOM.input)
62
+ .toBeComponentOfType('input')
63
.scalarPropsEqual({
64
className: 'textinput',
65
style: {display: 'block', color: 'green'},
@@ -74,7 +74,7 @@ describe('ReactPropTransferer', function() {
74
75
reactComponentExpect(instance)
76
.expectRenderedChild()
77
- .toBeComponentOfType(React.DOM.input)
77
+ .toBeComponentOfType('input')
78
.scalarPropsEqual({placeholder: 'Type here...'});
79
});
80
@@ -88,7 +88,7 @@ describe('ReactPropTransferer', function() {
88
89
reactComponentExpect(instance)
90
.expectRenderedChild()
91
- .toBeComponentOfType(React.DOM.input)
91
+ .toBeComponentOfType('input')
92
.scalarPropsEqual({
93
className: 'textinput hidden_elem',
94
style: {
src/test/reactComponentExpect.js
+4
-1
@@ -105,8 +105,11 @@ mergeInto(reactComponentExpect.prototype, {
105
// Matchers ------------------------------------------------------------------
106
107
toBeComponentOfType: function(convenienceConstructor) {
108
+ var type = typeof convenienceConstructor === 'string' ?
109
+ convenienceConstructor :
110
+ convenienceConstructor.type;
111
expect(
109
- this.instance()._descriptor.type === convenienceConstructor.type
112
+ this.instance()._descriptor.type === type
113
).toBe(true);
114
return this;
115
},