feat(rax-compat): lowercase props compat

alibaba · May 6, 2024 · 60ed0e1 · 60ed0e1
1 parent 7bd238a
commit 60ed0e1
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git a/.changeset/gold-scissors-know.md b/.changeset/gold-scissors-know.md
@@ -0,0 +1,5 @@
+---
+'rax-compat': patch
+---
+
+lowercase props compat
diff --git a/packages/rax-compat/src/possible-standard-names.ts b/packages/rax-compat/src/possible-standard-names.ts
@@ -23,13 +23,17 @@ const possibleStandardNames = [
   'marginHeight',
   // meta
   'charSet',
-].reduce((records: Record<string, string>, iter: string) => {
-  records[iter.toLowerCase()] = iter;
-  return records;
-}, {
-  // Special cases.
-  class: 'className',
-  for: 'htmlFor',
-});
+  'dangerouslySetInnerHTML',
+].reduce(
+  (records: Record<string, string>, iter: string) => {
+    records[iter.toLowerCase()] = iter;
+    return records;
+  },
+  {
+    // Special cases.
+    class: 'className',
+    for: 'htmlFor',
+  },
+);
 
 export default possibleStandardNames;
diff --git a/packages/rax-compat/src/props.ts b/packages/rax-compat/src/props.ts
@@ -30,6 +30,10 @@ 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;
+      val = typeof val === 'boolean' ? val.toString() : val;
     }
 
     transformedProps[key] = val;