Resolve default prop values in cloneElement
In cloneElement, when key in input config is set to undefined, the associated prop value should be resolved to default prop values
Nguyen Truong Duy committed
Feb 8, 2016 at 11:09 UTC
48ded230fca7983dafeb310b8bf5f6ec96958b3d
2 files changed
+33
-1
src/isomorphic/classic/element/ReactElement.js
+10
-1
@@ -243,10 +243,19 @@ ReactElement.cloneElement = function(element, config, children) {
243
key = '' + config.key;
244
}
245
// Remaining properties override existing props
246
+ var defaultProps;
247
+ if (element.type && element.type.defaultProps) {
248
+ defaultProps = element.type.defaultProps;
249
+ }
250
for (propName in config) {
251
if (config.hasOwnProperty(propName) &&
252
!RESERVED_PROPS.hasOwnProperty(propName)) {
249
- props[propName] = config[propName];
253
+ if (config[propName] === undefined && defaultProps !== undefined) {
254
+ // Resolve default props
255
+ props[propName] = defaultProps[propName];
256
+ } else {
257
+ props[propName] = config[propName];
258
+ }
259
}
260
}
261
}
src/isomorphic/classic/element/__tests__/ReactElement-test.js
+23
@@ -273,6 +273,29 @@ describe('ReactElement', function() {
273
expect(inst2.props.prop).toBe(null);
274
});
275
276
+ it('should normalize props with default values in cloning', function() {
277
+ var Component = React.createClass({
278
+ getDefaultProps: function() {
279
+ return {prop: 'testKey'};
280
+ },
281
+ render: function() {
282
+ return <span />;
283
+ },
284
+ });
285
+
286
+ var instance = React.createElement(Component);
287
+ var clonedInstance = React.cloneElement(instance, {prop: undefined});
288
+ expect(clonedInstance.props.prop).toBe('testKey');
289
+ var clonedInstance2 = React.cloneElement(instance, {prop: null});
290
+ expect(clonedInstance2.props.prop).toBe(null);
291
+
292
+ var instance2 = React.createElement(Component, {prop: 'newTestKey'});
293
+ var cloneInstance3 = React.cloneElement(instance2, {prop: undefined});
294
+ expect(cloneInstance3.props.prop).toBe('testKey');
295
+ var cloneInstance4 = React.cloneElement(instance2, {});
296
+ expect(cloneInstance4.props.prop).toBe('newTestKey');
297
+ });
298
+
299
it('throws when changing a prop (in dev) after element creation', function() {
300
var Outer = React.createClass({
301
render: function() {