Merge pull request #6878 from alibaba/feat/rax_compat_props_lowercase

Compat for legacy camelcase props

.changeset/gold-scissors-know.md

@@ -0,0 +1,5 @@
+---
+'rax-compat': patch
+---
+
+lowercase props compat

packages/rax-compat/src/possible-standard-names.ts

@@ -23,6 +23,7 @@ const possibleStandardNames = [
   'marginHeight',
   // meta
   'charSet',
+  'dangerouslySetInnerHTML',
 ].reduce((records: Record<string, string>, iter: string) => {
   records[iter.toLowerCase()] = iter;
   return records;

packages/rax-compat/src/props.ts

@@ -30,6 +30,9 @@ function transformProps(props: ComponentProps<JSXElementConstructor<any>>): Reco
     } else if (possibleStandardNames.hasOwnProperty(lowerCasedPropKey)) {
       // Transform attribute names that make it works properly in React.
       key = possibleStandardNames[lowerCasedPropKey];
+    } else {
+      // Handles component props from rax-components like resizeMode, this causes React to throw a warning.
+      key = lowerCasedPropKey;
     }
 
     transformedProps[key] = val;

packages/rax-compat/tests/props.test.tsx

@@ -41,4 +41,14 @@ describe('props', () => {
       inputmode: 'numeric',
     }).inputMode).toBe('numeric');
   });
+
+  it('should work with dangerouslySetInnerHTML', () => {
+    expect(
+      transformProps({
+        dangerouslySetInnerHTML: { __html: 'xxx' },
+      }).dangerouslySetInnerHTML,
+    ).toEqual({
+      __html: 'xxx',
+    });
+  });
 });