Add warning for unknown properties.

facebook · May 19, 2016 · 40308f7 · 40308f7
1 parent 8ea1cf4
commit 40308f7
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 20 deletions.
diff --git a/src/addons/transitions/ReactTransitionGroup.js b/src/addons/transitions/ReactTransitionGroup.js
@@ -222,9 +222,21 @@ var ReactTransitionGroup = React.createClass({
         ));
       }
     }
+
+    // Do not forward ReactTransitionGroup props to primitive DOM nodes
+    var props = Object.assign({}, this.props);
+    delete props.transitionLeave;
+    delete props.transitionName;
+    delete props.transitionAppear;
+    delete props.transitionEnter;
+    delete props.childFactory;
+    delete props.transitionLeaveTimeout;
+    delete props.transitionEnterTimeout;
+    delete props.component;
+
     return React.createElement(
       this.props.component,
-      this.props,
+      props,
       childrenToRender
     );
   },

diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
@@ -148,6 +148,19 @@ describe('ReactDOMComponent', function() {
       expect(console.error.argsForCall.length).toBe(2);
     });
 
+    it('should warn for unknown prop', function() {
+      spyOn(console, 'error');
+      var container = document.createElement('div');
+      ReactDOM.render(<div foo="bar" />, container);
+      expect(console.error.argsForCall.length).toBe(1);
+      expect(console.error.argsForCall[0][0]).toContain(
+        'Warning: Unknown prop foo on <div> tag.  See https://fb.me/react-unknown-prop'
+      );
+      expect(console.error.argsForCall[0][0]).toContain(
+        'ReactDOMComponent-test.js'
+      );
+    });
+
     it('should warn about styles with numeric string values for non-unitless properties', function() {
       spyOn(console, 'error');
 

diff --git a/src/renderers/dom/shared/devtools/ReactDOMUnknownPropertyDevtool.js b/src/renderers/dom/shared/devtools/ReactDOMUnknownPropertyDevtool.js
@@ -22,10 +22,19 @@ if (__DEV__) {
     dangerouslySetInnerHTML: true,
     key: true,
     ref: true,
+
+    defaultValue: true,
+    valueLink: true,
+    defaultChecked: true,
+    checkedLink: true,
+    innerHTML: true,
+    suppressContentEditableWarning: true,
+    onFocusIn: true,
+    onFocusOut: true,
   };
   var warnedProperties = {};
 
-  var warnUnknownProperty = function(name, source) {
+  var warnUnknownProperty = function(tagName, name, source) {
     if (DOMProperty.properties.hasOwnProperty(name) || DOMProperty.isCustomAttribute(name)) {
       return;
     }
@@ -48,16 +57,6 @@ if (__DEV__) {
         null
     );
 
-    // For now, only warn when we have a suggested correction. This prevents
-    // logging too much when using transferPropsTo.
-    warning(
-      standardName == null,
-      'Unknown DOM property %s. Did you mean %s? %s',
-      name,
-      standardName,
-      formatSource(source)
-    );
-
     var registrationName = (
       EventPluginRegistry.possibleRegistrationNames.hasOwnProperty(
         lowerCasedName
@@ -66,13 +65,34 @@ if (__DEV__) {
       null
     );
 
-    warning(
-      registrationName == null,
-      'Unknown event handler property %s. Did you mean `%s`? %s',
-      name,
-      registrationName,
-      formatSource(source)
-    );
+    if (standardName != null) {
+      warning(
+        standardName == null,
+        'Unknown DOM property %s. Did you mean %s? %s',
+        name,
+        standardName,
+        formatSource(source)
+      );
+    } else if (registrationName != null) {
+      warning(
+        registrationName == null,
+        'Unknown event handler property %s. Did you mean `%s`? %s',
+        name,
+        registrationName,
+        formatSource(source)
+      );
+    } else {
+      // We were unable to guess which prop the user intended.
+      // It is likely that the user was just blindly spreading/forwarding props
+      // Components should be careful to only render valid props/attributes.
+      warning(
+        tagName.indexOf('-') >= 0,
+        'Unknown prop %s on <%s> tag.  See https://fb.me/react-unknown-prop %s',
+        name,
+        tagName,
+        formatSource(source)
+      );
+    }
   };
 
   var formatSource = function(source) {
@@ -85,8 +105,11 @@ function handleElement(element) {
   if (element == null || typeof element.type !== 'string') {
     return;
   }
+  if (element.props.is) {
+    return;
+  }
   for (var key in element.props) {
-    warnUnknownProperty(key, element._source);
+    warnUnknownProperty(element.type, key, element._source);
   }
 }