Infer displayName in more cases for props.ref/key warning
Dan Abramov committed
May 26, 2016 at 01:20 UTC
55a0e4bf801d35cc5ff13404d7f7490f36307317
2 files changed
+51
-3
src/isomorphic/classic/element/ReactElement.js
+6
-2
@@ -205,6 +205,10 @@ ReactElement.createElement = function(type, config, children) {
205
}
206
}
207
if (__DEV__) {
208
+ var displayName = typeof type === 'function' ?
209
+ (type.displayName || type.name || 'Unknown') :
210
+ type;
211
+
212
// Create dummy `key` and `ref` property to `props` to warn users against its use
213
function warnAboutAccessingKey() {
214
if (!specialPropKeyWarningShown) {
@@ -215,7 +219,7 @@ ReactElement.createElement = function(type, config, children) {
219
'in `undefined` being returned. If you need to access the same ' +
220
'value within the child component, you should pass it as a different ' +
221
'prop. (https://fb.me/react-special-props)',
218
- typeof type === 'function' && 'displayName' in type ? type.displayName : 'Element'
222
+ displayName
223
);
224
}
225
return undefined;
@@ -231,7 +235,7 @@ ReactElement.createElement = function(type, config, children) {
235
'in `undefined` being returned. If you need to access the same ' +
236
'value within the child component, you should pass it as a different ' +
237
'prop. (https://fb.me/react-special-props)',
234
- typeof type === 'function' && 'displayName' in type ? type.displayName : 'Element'
238
+ displayName
239
);
240
}
241
return undefined;
src/isomorphic/classic/element/__tests__/ReactElement-test.js
+45
-1
@@ -58,7 +58,7 @@ describe('ReactElement', function() {
58
expect(element.props).toEqual(expectation);
59
});
60
61
- it('should warn when `key` is being accessed', function() {
61
+ it('should warn when `key` is being accessed on createClass element', function() {
62
spyOn(console, 'error');
63
var container = document.createElement('div');
64
var Child = React.createClass({
@@ -88,6 +88,50 @@ describe('ReactElement', function() {
88
);
89
});
90
91
+ it('should warn when `key` is being accessed on ES class element', function() {
92
+ spyOn(console, 'error');
93
+ var container = document.createElement('div');
94
+ class Child extends React.Component {
95
+ render() {
96
+ return <div> {this.props.key} </div>;
97
+ }
98
+ }
99
+ var Parent = React.createClass({
100
+ render: function() {
101
+ return (
102
+ <div>
103
+ <Child key="0" />
104
+ <Child key="1" />
105
+ <Child key="2" />
106
+ </div>
107
+ );
108
+ },
109
+ });
110
+ expect(console.error.calls.count()).toBe(0);
111
+ ReactDOM.render(<Parent />, container);
112
+ expect(console.error.calls.count()).toBe(1);
113
+ expect(console.error.calls.argsFor(0)[0]).toContain(
114
+ 'Child: `key` is not a prop. Trying to access it will result ' +
115
+ 'in `undefined` being returned. If you need to access the same ' +
116
+ 'value within the child component, you should pass it as a different ' +
117
+ 'prop. (https://fb.me/react-special-props)'
118
+ );
119
+ });
120
+
121
+ it('should warn when `key` is being accessed on a host element', function() {
122
+ spyOn(console, 'error');
123
+ var element = <div key="3" />;
124
+ expect(console.error.calls.count()).toBe(0);
125
+ void element.props.key;
126
+ expect(console.error.calls.count()).toBe(1);
127
+ expect(console.error.calls.argsFor(0)[0]).toContain(
128
+ 'div: `key` is not a prop. Trying to access it will result ' +
129
+ 'in `undefined` being returned. If you need to access the same ' +
130
+ 'value within the child component, you should pass it as a different ' +
131
+ 'prop. (https://fb.me/react-special-props)'
132
+ );
133
+ });
134
+
135
it('should warn when `ref` is being accessed', function() {
136
spyOn(console, 'error');
137
var container = document.createElement('div');