{"parents":["715aadd1c71f775b325608b846af34cd1bae6c8f","20dd247292c36cc00c9441ee3327eda6a2222912"],"commit":{"authoredAt":"2015-03-10T15:24:00-07:00","shortRevision":"9cb25b3ddb","revision":"9cb25b3ddbb8aa4683c3a245ee68967b9abd30a0","subject":"Merge pull request #2266 from syranide\/voidelem","authorEmail":"ben@benalpert.com","authorName":"Ben Alpert"},"patch":"diff --git a\/src\/browser\/ui\/ReactDOMComponent.js b\/src\/browser\/ui\/ReactDOMComponent.js\nindex 3d2c2332b8..30470fa66d 100644\n--- a\/src\/browser\/ui\/ReactDOMComponent.js\n+++ b\/src\/browser\/ui\/ReactDOMComponent.js\n@@ -50,11 +50,21 @@ var BackendIDOperations = null;\n \/**\n * @param {?object} props\n *\/\n-function assertValidProps(props) {\n+function assertValidProps(component, props) {\n if (!props) {\n return;\n }\n \/\/ Note the use of `==` which checks for null or undefined.\n+ if (__DEV__) {\n+ if (voidElementTags[component._tag]) {\n+ warning(\n+ props.children == null && props.dangerouslySetInnerHTML == null,\n+ '%s is a void element tag and must not have `children` or ' +\n+ 'use `props.dangerouslySetInnerHTML`.',\n+ component._tag\n+ );\n+ }\n+ }\n if (props.dangerouslySetInnerHTML != null) {\n invariant(\n props.children == null,\n@@ -134,6 +144,13 @@ var omittedCloseTags = {\n \/\/ NOTE: menuitem's close tag should be omitted, but that causes problems.\n };\n \n+\/\/ For HTML, certain tags cannot have children. This has the same purpose as\n+\/\/ `omittedCloseTags` except that `menuitem` should still have its closing tag.\n+\n+var voidElementTags = assign({\n+ 'menuitem': true\n+}, omittedCloseTags);\n+\n \/\/ We accept any tag to be rendered but since this gets injected into abitrary\n \/\/ HTML, we want to make sure that it's a safe tag.\n \/\/ http:\/\/www.w3.org\/TR\/REC-xml\/#NT-Name\n@@ -190,7 +207,7 @@ ReactDOMComponent.Mixin = {\n *\/\n mountComponent: function(rootID, transaction, context) {\n this._rootNodeID = rootID;\n- assertValidProps(this._currentElement.props);\n+ assertValidProps(this, this._currentElement.props);\n var closeTag = omittedCloseTags[this._tag] ? '' : '<\/' + this._tag + '>';\n return (\n this._createOpenTagMarkupAndPutListeners(transaction) +\n@@ -312,7 +329,7 @@ ReactDOMComponent.Mixin = {\n * @overridable\n *\/\n updateComponent: function(transaction, prevElement, nextElement, context) {\n- assertValidProps(this._currentElement.props);\n+ assertValidProps(this, this._currentElement.props);\n this._updateDOMProperties(prevElement.props, transaction);\n this._updateDOMChildren(prevElement.props, transaction, context);\n },\ndiff --git a\/src\/browser\/ui\/__tests__\/ReactDOMComponent-test.js b\/src\/browser\/ui\/__tests__\/ReactDOMComponent-test.js\nindex 8b4a98eb07..fd986261dc 100644\n--- a\/src\/browser\/ui\/__tests__\/ReactDOMComponent-test.js\n+++ b\/src\/browser\/ui\/__tests__\/ReactDOMComponent-test.js\n@@ -303,11 +303,13 @@ describe('ReactDOMComponent', function() {\n });\n \n describe('mountComponent', function() {\n+ var React;\n var mountComponent;\n \n beforeEach(function() {\n require('mock-modules').dumpCache();\n \n+ React = require('React');\n var ReactMultiChild = require('ReactMultiChild');\n var ReactDOMComponent = require('ReactDOMComponent');\n var ReactReconcileTransaction = require('ReactReconcileTransaction');\n@@ -330,6 +332,46 @@ describe('ReactDOMComponent', function() {\n };\n });\n \n+ it(\"should warn against children for void elements\", function() {\n+ spyOn(console, 'warn');\n+\n+ var container = document.createElement('div');\n+\n+ React.render(children<\/input>, container);\n+\n+ expect(console.warn.argsForCall.length).toBe(1);\n+ expect(console.warn.argsForCall[0][0]).toContain('void element');\n+ });\n+\n+ it(\"should warn against dangerouslySetInnerHTML for void elements\", function() {\n+ spyOn(console, 'warn');\n+\n+ var container = document.createElement('div');\n+\n+ React.render(\n+ ,\n+ container\n+ );\n+\n+ expect(console.warn.argsForCall.length).toBe(1);\n+ expect(console.warn.argsForCall[0][0]).toContain('void element');\n+ });\n+\n+ it(\"should treat menuitem as a void element but still create the closing tag\", function() {\n+ spyOn(console, 'warn');\n+\n+ var container = document.createElement('div');\n+\n+ React.render(, container);\n+\n+ expect(container.innerHTML).toContain('<\/menuitem>');\n+\n+ React.render(children<\/menuitem>, container);\n+\n+ expect(console.warn.argsForCall.length).toBe(1);\n+ expect(console.warn.argsForCall[0][0]).toContain('void element');\n+ });\n+\n it(\"should validate against multiple children props\", function() {\n expect(function() {\n mountComponent({children: '', dangerouslySetInnerHTML: ''});\n@@ -396,6 +438,29 @@ describe('ReactDOMComponent', function() {\n container = document.createElement('div');\n });\n \n+ it(\"should warn against children for void elements\", function() {\n+ spyOn(console, 'warn');\n+\n+ React.render(, container);\n+ React.render(children<\/input>, container);\n+\n+ expect(console.warn.argsForCall.length).toBe(1);\n+ expect(console.warn.argsForCall[0][0]).toContain('void element');\n+ });\n+\n+ it(\"should warn against dangerouslySetInnerHTML for void elements\", function() {\n+ spyOn(console, 'warn');\n+\n+ React.render(, container);\n+ React.render(\n+ ,\n+ container\n+ );\n+\n+ expect(console.warn.argsForCall.length).toBe(1);\n+ expect(console.warn.argsForCall[0][0]).toContain('void element');\n+ });\n+\n it(\"should validate against multiple children props\", function() {\n React.render(

<\/div>, container);\n \n","files":[{"status":"M","path":"src\/browser\/ui\/ReactDOMComponent.js"},{"status":"M","path":"src\/browser\/ui\/__tests__\/ReactDOMComponent-test.js"}],"body":"ReactDOMComponent should not accept children for void elements"}

dillon1000/react

Files changed