Warn about SVG attributes once
This fixes a missing check in #5714
Dan Abramov committed
Mar 4, 2016 at 16:05 UTC
8a9ab75261c3661490dc5f88a1d50f6cc041a55e
2 files changed
+40
-4
src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+33
@@ -539,6 +539,39 @@ describe('ReactDOMComponent', function() {
539
expect(console.error.argsForCall[0][0]).toContain('clip-path');
540
});
541
542
+ it('should only warn once about deprecated SVG attributes', function() {
543
+ spyOn(console, 'error');
544
+ var container = document.createElement('div');
545
+ ReactDOM.render(
546
+ <svg clipPath="0 0 100 100">
547
+ <rect strokeWidth={1} />
548
+ <rect strokeWidth={10} />
549
+ </svg>,
550
+ container
551
+ );
552
+ expect(console.error.argsForCall.length).toBe(2);
553
+ expect(console.error.argsForCall[0][0]).toContain('clipPath');
554
+ expect(console.error.argsForCall[0][0]).toContain('clip-path');
555
+ expect(console.error.argsForCall[1][0]).toContain('strokeWidth');
556
+ expect(console.error.argsForCall[1][0]).toContain('stroke-width');
557
+
558
+ ReactDOM.render(
559
+ <svg clipPath="0 0 100 100">
560
+ <rect strokeWidth={1} strokeOpacity={0.5} />
561
+ <rect strokeWidth={10} />
562
+ <rect strokeWidth={100} />
563
+ </svg>,
564
+ container
565
+ );
566
+ expect(console.error.argsForCall.length).toBe(3);
567
+ expect(console.error.argsForCall[0][0]).toContain('clipPath');
568
+ expect(console.error.argsForCall[0][0]).toContain('clip-path');
569
+ expect(console.error.argsForCall[1][0]).toContain('strokeWidth');
570
+ expect(console.error.argsForCall[1][0]).toContain('stroke-width');
571
+ expect(console.error.argsForCall[2][0]).toContain('strokeOpacity');
572
+ expect(console.error.argsForCall[2][0]).toContain('stroke-opacity');
573
+ });
574
+
575
it('should update arbitrary hyphenated attributes for SVG tags', function() {
576
var container = document.createElement('div');
577
src/renderers/dom/shared/devtools/ReactDOMSVGDeprecatedAttributeDevtool.js
+7
-4
@@ -25,20 +25,23 @@ if (__DEV__) {
25
var warnedSVGAttributes = {};
26
27
var warnDeprecatedSVGAttribute = function(name) {
28
- if (!DOMProperty.properties.hasOwnProperty(name)) {
28
+ if (reactProps.hasOwnProperty(name) && reactProps[name]) {
29
return;
30
}
31
32
- if (reactProps.hasOwnProperty(name) && reactProps[name] ||
33
- warnedSVGAttributes.hasOwnProperty(name) && warnedSVGAttributes[name]) {
32
+ if (!DOMProperty.properties.hasOwnProperty(name)) {
33
return;
34
}
36
-
35
var { attributeName, attributeNamespace } = DOMProperty.properties[name];
36
if (attributeNamespace || name === attributeName) {
37
return;
38
}
39
40
+ if (warnedSVGAttributes.hasOwnProperty(name) && warnedSVGAttributes[name]) {
41
+ return;
42
+ }
43
+ warnedSVGAttributes[name] = true;
44
+
45
warning(
46
false,
47
'SVG property %s is deprecated. Use the original attribute name ' +