The library for web and native user interfaces.
Remove content property
Fixes #119.
Ben Alpert committed
Jun 22, 2013 at 01:18 UTC
e9980412296b6469f39605f48ea527776d7ac718
5 files changed
+19
-71
src/core/ReactDOMIDOperations.js
-1
@@ -36,7 +36,6 @@ var invariant = require('invariant');
36
* @private
37
*/
38
var INVALID_PROPERTY_ERRORS = {
39
- content: '`content` must be set using `updateTextContentByID()`.',
39
dangerouslySetInnerHTML:
40
'`dangerouslySetInnerHTML` must be set using `updateInnerHTMLByID()`.',
41
style: '`style` must be set using `updateStylesByID()`.'
src/core/ReactNativeComponent.js
+8
-25
@@ -39,7 +39,6 @@ var registrationNames = ReactEventEmitter.registrationNames;
39
// For quickly matching children type, to test if can be treated as content.
40
var CONTENT_TYPES = {'string': true, 'number': true};
41
42
-var CONTENT = keyOf({content: null});
42
var DANGEROUSLY_SET_INNER_HTML = keyOf({dangerouslySetInnerHTML: null});
43
var STYLE = keyOf({style: null});
44
@@ -50,14 +49,10 @@ function assertValidProps(props) {
49
if (!props) {
50
return;
51
}
53
- // Note the use of `!=` which checks for null or undefined.
54
- var hasChildren = props.children != null ? 1 : 0;
55
- var hasContent = props.content != null ? 1 : 0;
56
- var hasInnerHTML = props.dangerouslySetInnerHTML != null ? 1 : 0;
52
+ // Note the use of `==` which checks for null or undefined.
53
invariant(
58
- hasChildren + hasContent + hasInnerHTML <= 1,
59
- 'Can only set one of `children`, `props.content`, or ' +
60
- '`props.dangerouslySetInnerHTML`.'
54
+ props.children == null || props.dangerouslySetInnerHTML == null,
55
+ 'Can only set one of `children` or `props.dangerouslySetInnerHTML`.'
56
);
57
invariant(
58
props.style == null || typeof props.style === 'object',
@@ -156,7 +151,7 @@ ReactNativeComponent.Mixin = {
151
return innerHTML.__html;
152
}
153
} else {
159
- var contentToUse = this.props.content != null ? this.props.content :
154
+ var contentToUse =
155
CONTENT_TYPES[typeof this.props.children] ? this.props.children : null;
156
var childrenToUse = contentToUse != null ? null : this.props.children;
157
if (contentToUse != null) {
@@ -219,8 +214,8 @@ ReactNativeComponent.Mixin = {
214
styleUpdates[styleName] = '';
215
}
216
}
222
- } else if (propKey === DANGEROUSLY_SET_INNER_HTML ||
223
- propKey === CONTENT) {
217
+ } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
218
+ // http://jsperf.com/emptying-speed
219
ReactComponent.DOMIDOperations.updateTextContentByID(
220
this._rootNodeID,
221
''
@@ -274,11 +269,6 @@ ReactNativeComponent.Mixin = {
269
nextProp
270
);
271
}
277
- } else if (propKey === CONTENT) {
278
- ReactComponent.DOMIDOperations.updateTextContentByID(
279
- this._rootNodeID,
280
- '' + nextProp
281
- );
272
} else if (registrationNames[propKey]) {
273
putListener(this._rootNodeID, propKey, nextProp);
274
} else {
@@ -305,17 +295,10 @@ ReactNativeComponent.Mixin = {
295
* @param {ReactReconcileTransaction} transaction
296
*/
297
_updateDOMChildren: function(nextProps, transaction) {
308
- var thisPropsContentType = typeof this.props.content;
309
- var thisPropsContentEmpty =
310
- this.props.content == null || thisPropsContentType === 'boolean';
311
- var nextPropsContentType = typeof nextProps.content;
312
- var nextPropsContentEmpty =
313
- nextProps.content == null || nextPropsContentType === 'boolean';
314
-
315
- var lastUsedContent = !thisPropsContentEmpty ? this.props.content :
298
+ var lastUsedContent =
299
CONTENT_TYPES[typeof this.props.children] ? this.props.children : null;
300
318
- var contentToUse = !nextPropsContentEmpty ? nextProps.content :
301
+ var contentToUse =
302
CONTENT_TYPES[typeof nextProps.children] ? nextProps.children : null;
303
304
// Note the use of `!=` which checks for null or undefined.
src/core/__tests__/ReactDOMIDOperations-test.js
+2
-2
@@ -33,8 +33,8 @@ describe('ReactDOMIDOperations', function() {
33
expect(function() {
34
ReactDOMIDOperations.updatePropertyByID(
35
'testID',
36
- keyOf({content: null}),
37
- 'testContent'
36
+ keyOf({dangerouslySetInnerHTML: null}),
37
+ {__html: 'testContent'}
38
);
39
}).toThrow();
40
src/core/__tests__/ReactMultiChildText-test.js
+7
-27
@@ -71,10 +71,6 @@ var assertSingleChild = function(instance, text) {
71
};
72
73
// Helpers
74
-var renderSingleContentChild = function(text) {
75
- var d = ReactTestUtils.renderIntoDocument(<div content={text} />);
76
- return d;
77
-};
74
var renderSingleTextChild = function(text) {
75
var d = ReactTestUtils.renderIntoDocument(<div>{text}</div>);
76
return d;
@@ -158,11 +154,6 @@ describe('ReactMultiChildText', function() {
154
assertMultiChild(d, 'hello', 'goodbye');
155
});
156
161
- it('should render content to single text node', function() {
162
- var d = renderSingleContentChild('hello');
163
- assertNodeText(d, 'hello');
164
- });
165
-
157
it('should render a single text child to a single text node', function() {
158
var d = renderSingleTextChild('hello');
159
assertNodeText(d, 'hello');
@@ -234,12 +225,6 @@ describe('ReactMultiChildText', function() {
225
assertNodeText(d, '0');
226
});
227
237
- it('should render content number zero as text node', function() {
238
- var d = renderSingleContentChild(0);
239
- // false should act exactly as a null child
240
- assertNodeText(d, '0');
241
- });
242
-
228
it('should render zero string as string child', function() {
229
var d = renderMultipleTextChildren('0', 234.2);
230
// false should act exactly as a null child
@@ -250,7 +235,7 @@ describe('ReactMultiChildText', function() {
235
var d = renderMultipleTextChildren('0', 234.2);
236
// false should act exactly as a null child
237
assertMultiChild(d, '0', '234.2');
253
- d.replaceProps({content: '0'});
238
+ d.replaceProps({children: '0'});
239
assertNodeText(d, '0');
240
});
241
@@ -258,7 +243,7 @@ describe('ReactMultiChildText', function() {
243
var d = renderMultipleTextChildren(0, 234.2);
244
// false should act exactly as a null child
245
assertMultiChild(d, '0', '234.2');
261
- d.replaceProps({content: 0});
246
+ d.replaceProps({children: 0});
247
// BELOW REVEALS A BUG IN JSDOM
248
// assertNodeText(d, '0'); // This works in the browser.
249
});
@@ -266,7 +251,7 @@ describe('ReactMultiChildText', function() {
251
it('should render multiple children then switch to inline', function() {
252
var d = renderMultipleTextChildren('hello', 'goodbye');
253
assertMultiChild(d, 'hello', 'goodbye');
269
- d.replaceProps({content: 'hello'});
254
+ d.replaceProps({children: 'hello'});
255
assertNodeText(d, 'hello');
256
});
257
@@ -286,13 +271,6 @@ describe('ReactMultiChildText', function() {
271
assertMultiChild(d, 'hello', 'goodbye');
272
});
273
289
- it('should render content, then switch to text components ', function() {
290
- var d = renderSingleContentChild('hello');
291
- assertNodeText(d, 'hello');
292
- d.replaceProps({children: ['hello', 'goodbye']});
293
- assertMultiChild(d, 'hello', 'goodbye');
294
- });
295
-
274
it('should render inline child, then switch to composite', function() {
275
var d = renderSingleTextChild('hello');
276
assertNodeText(d, 'hello');
@@ -302,9 +280,11 @@ describe('ReactMultiChildText', function() {
280
.toBeCompositeComponentWithType(TestCompositeComponent);
281
});
282
305
- it('should throw if rendering both content and children', function() {
283
+ it('should throw if rendering both HTML and children', function() {
284
expect(function() {
307
- ReactTestUtils.renderIntoDocument(<div content="asdf">ghjkl</div>);
285
+ ReactTestUtils.renderIntoDocument(
286
+ <div dangerouslySetInnerHTML={{_html: 'abcdef'}}>ghjkl</div>
287
+ );
288
}).toThrow();
289
});
290
});
src/core/__tests__/ReactNativeComponent-test.js
+2
-16
@@ -292,25 +292,11 @@ describe('ReactNativeComponent', function() {
292
});
293
294
it("should validate against multiple children props", function() {
295
- expect(function() {
296
- mountComponent({ content: '', children: '' });
297
- }).toThrow(
298
- 'Invariant Violation: Can only set one of `children`, ' +
299
- '`props.content`, or `props.dangerouslySetInnerHTML`.'
300
- );
301
-
302
- expect(function() {
303
- mountComponent({ content: '', dangerouslySetInnerHTML: '' });
304
- }).toThrow(
305
- 'Invariant Violation: Can only set one of `children`, ' +
306
- '`props.content`, or `props.dangerouslySetInnerHTML`.'
307
- );
308
-
295
expect(function() {
296
mountComponent({ children: '', dangerouslySetInnerHTML: '' });
297
}).toThrow(
312
- 'Invariant Violation: Can only set one of `children`, ' +
313
- '`props.content`, or `props.dangerouslySetInnerHTML`.'
298
+ 'Invariant Violation: Can only set one of `children` or ' +
299
+ '`props.dangerouslySetInnerHTML`.'
300
);
301
});
302