{"files":[{"path":"src\/isomorphic\/classic\/element\/ReactElement.js","status":"M"},{"path":"src\/isomorphic\/classic\/element\/__tests__\/ReactElement-test.js","status":"M"}],"patch":"diff --git a\/src\/isomorphic\/classic\/element\/ReactElement.js b\/src\/isomorphic\/classic\/element\/ReactElement.js\nindex 44aa50f7d2..65e95683f7 100644\n--- a\/src\/isomorphic\/classic\/element\/ReactElement.js\n+++ b\/src\/isomorphic\/classic\/element\/ReactElement.js\n@@ -14,6 +14,7 @@\n var ReactCurrentOwner = require('ReactCurrentOwner');\n \n var assign = require('Object.assign');\n+var warning = require('warning');\n var canDefineProperty = require('canDefineProperty');\n \n \/\/ The Symbol used to tag the ReactElement type. If there is no native Symbol\n@@ -29,6 +30,8 @@ var RESERVED_PROPS = {\n __source: true,\n };\n \n+var specialPropKeyWarningShown, specialPropRefWarningShown;\n+\n \/**\n * Factory method to create a new React element. This no longer adheres to\n * the class pattern, so do not use new to call it. Also, no instanceof check\n@@ -123,8 +126,15 @@ ReactElement.createElement = function(type, config, children) {\n var source = null;\n \n if (config != null) {\n- ref = config.ref === undefined ? null : config.ref;\n- key = config.key === undefined ? null : '' + config.key;\n+ if (__DEV__) {\n+ ref = !config.hasOwnProperty('ref') ||\n+ Object.getOwnPropertyDescriptor(config, 'ref').get ? null : config.ref;\n+ key = !config.hasOwnProperty('key') ||\n+ Object.getOwnPropertyDescriptor(config, 'key').get ? null : '' + config.key;\n+ } else {\n+ ref = config.ref === undefined ? null : config.ref;\n+ key = config.key === undefined ? null : '' + config.key;\n+ }\n self = config.__self === undefined ? null : config.__self;\n source = config.__source === undefined ? null : config.__source;\n \/\/ Remaining properties are added to a new props object\n@@ -158,7 +168,51 @@ ReactElement.createElement = function(type, config, children) {\n }\n }\n }\n-\n+ if (__DEV__) {\n+ \/\/ Create dummy `key` and `ref` property to `props` to warn users\n+ \/\/ against its use\n+ if (typeof props.$$typeof === 'undefined' ||\n+ props.$$typeof !== REACT_ELEMENT_TYPE) {\n+ if (!props.hasOwnProperty('key')) {\n+ Object.defineProperty(props, 'key', {\n+ get: function() {\n+ if (!specialPropKeyWarningShown) {\n+ specialPropKeyWarningShown = true;\n+ warning(\n+ false,\n+ '%s: `key` is not a prop. Trying to access it will result ' +\n+ 'in `undefined` being returned. If you need to access the same ' +\n+ 'value within the child component, you should pass it as a different ' +\n+ 'prop. (https:\/\/fb.me\/react-special-props)',\n+ 'displayName' in type ? type.displayName: 'Element'\n+ );\n+ }\n+ return undefined;\n+ },\n+ configurable: true,\n+ });\n+ }\n+ if (!props.hasOwnProperty('ref')) {\n+ Object.defineProperty(props, 'ref', {\n+ get: function() {\n+ if (!specialPropRefWarningShown) {\n+ specialPropRefWarningShown = true;\n+ warning(\n+ false,\n+ '%s: `ref` is not a prop. Trying to access it will result ' +\n+ 'in `undefined` being returned. If you need to access the same ' +\n+ 'value within the child component, you should pass it as a different ' +\n+ 'prop. (https:\/\/fb.me\/react-special-props)',\n+ 'displayName' in type ? type.displayName: 'Element'\n+ );\n+ }\n+ return undefined;\n+ },\n+ configurable: true,\n+ });\n+ }\n+ }\n+ }\n return ReactElement(\n type,\n key,\ndiff --git a\/src\/isomorphic\/classic\/element\/__tests__\/ReactElement-test.js b\/src\/isomorphic\/classic\/element\/__tests__\/ReactElement-test.js\nindex 1166ab28ea..124e80e0c2 100644\n--- a\/src\/isomorphic\/classic\/element\/__tests__\/ReactElement-test.js\n+++ b\/src\/isomorphic\/classic\/element\/__tests__\/ReactElement-test.js\n@@ -58,6 +58,64 @@ describe('ReactElement', function() {\n expect(element.props).toEqual(expectation);\n });\n \n+ it('should warn when `key` is being accessed', function() {\n+ spyOn(console, 'error');\n+ var container = document.createElement('div');\n+ var Child = React.createClass({\n+ render: function() {\n+ return

{this.props.key} <\/div>;\n+ },\n+ });\n+ var Parent = React.createClass({\n+ render: function() {\n+ return (\n+

\n+ \n+ \n+ \n+ <\/div>\n+ );\n+ },\n+ });\n+ expect(console.error.calls.length).toBe(0);\n+ ReactDOM.render(, container);\n+ expect(console.error.calls.length).toBe(1);\n+ expect(console.error.argsForCall[0][0]).toContain(\n+ 'Child: `key` is not a prop. Trying to access it will result ' +\n+ 'in `undefined` being returned. If you need to access the same ' +\n+ 'value within the child component, you should pass it as a different ' +\n+ 'prop. (https:\/\/fb.me\/react-special-props)'\n+ );\n+ });\n+\n+ it('should warn when `ref` is being accessed', function() {\n+ spyOn(console, 'error');\n+ var container = document.createElement('div');\n+ var Child = React.createClass({\n+ render: function() {\n+ return

{this.props.ref} <\/div>;\n+ },\n+ });\n+ var Parent = React.createClass({\n+ render: function() {\n+ return (\n+

\n+ \n+ <\/div>\n+ );\n+ },\n+ });\n+ expect(console.error.calls.length).toBe(0);\n+ ReactDOM.render(, container);\n+ expect(console.error.calls.length).toBe(1);\n+ expect(console.error.argsForCall[0][0]).toContain(\n+ 'Child: `ref` is not a prop. Trying to access it will result ' +\n+ 'in `undefined` being returned. If you need to access the same ' +\n+ 'value within the child component, you should pass it as a different ' +\n+ 'prop. (https:\/\/fb.me\/react-special-props)'\n+ );\n+ });\n+\n it('allows a string to be passed as the type', function() {\n var element = React.createFactory('div')();\n expect(element.type).toBe('div');\n","commit":{"shortRevision":"c3980a6d08","subject":"Warns on access of `props.key` and `props.ref`","authorEmail":"prometheansacrifice@gmail.com","authorName":"Manas","authoredAt":"2015-12-29T15:40:20+05:30","revision":"c3980a6d08257d39a08bed8b116d53a56344166b"},"body":"","parents":["ae5ff24da655d0c75724827b176522527f47a787"]}

dillon1000/react

Files changed