diff --git a/src/card/src/Card.tsx b/src/card/src/Card.tsx
index 3c5605b20..badeb0e3e 100644
--- a/src/card/src/Card.tsx
+++ b/src/card/src/Card.tsx
@@ -167,15 +167,12 @@ export default defineComponent({
             ) : null}
           </div>
         ) : null}
-        {
-          <div class="n-card__content" style={this.contentStyle}>
-            {this.$slots}
-          </div>
-        }
+        <div class="n-card__content" style={this.contentStyle}>
+          {$slots}
+        </div>
         {$slots.footer ? (
           <div class="n-card__footer">{renderSlot($slots, 'footer')}</div>
         ) : null}
-
         {$slots.action ? (
           <div class="n-card__action">{renderSlot($slots, 'action')}</div>
         ) : null}
diff --git a/src/code/src/Code.ts b/src/code/src/Code.tsx
similarity index 92%
rename from src/code/src/Code.ts
rename to src/code/src/Code.tsx
index 3d1ab521a..dd9d4b8d1 100644
--- a/src/code/src/Code.ts
+++ b/src/code/src/Code.tsx
@@ -6,7 +6,8 @@ import {
   onMounted,
   ref,
   computed,
-  PropType
+  PropType,
+  CSSProperties
 } from 'vue'
 import { useTheme, useHljs, Hljs } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
@@ -116,19 +117,10 @@ export default defineComponent({
   },
   render () {
     const { default: defaultSlot } = this.$slots
-    return h(
-      'code',
-      {
-        class: 'n-code',
-        style: this.cssVars
-      },
-      [
-        defaultSlot
-          ? defaultSlot()
-          : h('pre', {
-            ref: 'codeRef'
-          })
-      ]
+    return (
+      <code class="n-code" style={this.cssVars as CSSProperties}>
+        {defaultSlot ? defaultSlot() : <pre ref="codeRef"></pre>}
+      </code>
     )
   }
 })
diff --git a/src/radio/src/RadioGroup.ts b/src/radio/src/RadioGroup.tsx
similarity index 95%
rename from src/radio/src/RadioGroup.ts
rename to src/radio/src/RadioGroup.tsx
index 4676c762c..45cae2f82 100644
--- a/src/radio/src/RadioGroup.ts
+++ b/src/radio/src/RadioGroup.tsx
@@ -8,7 +8,8 @@ import {
   ref,
   toRef,
   reactive,
-  VNodeChild
+  VNodeChild,
+  CSSProperties
 } from 'vue'
 import { useMergedState } from 'vooks'
 import { useTheme, useFormItem } from '../../_mixins'
@@ -79,9 +80,7 @@ function mapSlot (
           ? currentInstanceClass
           : lastInstanceClass
       children.push(
-        h('div', {
-          class: ['n-radio-group__splitor', splitorClass]
-        }),
+        <div class={['n-radio-group__splitor', splitorClass]}></div>,
         wrappedInstance
       )
     }
@@ -214,18 +213,16 @@ export default defineComponent({
       flatten(getSlot(this)),
       mergedValue
     )
-    return h(
-      'div',
-      {
-        class: [
+    return (
+      <div
+        class={[
           'n-radio-group',
-          {
-            'n-radio-group--button-group': isButtonGroup
-          }
-        ],
-        style: this.cssVars
-      },
-      children
+          isButtonGroup && 'n-radio-group--button-group'
+        ]}
+        style={this.cssVars as CSSProperties}
+      >
+        {children}
+      </div>
     )
   }
 })