Update render-function.md

Author: yyx990803

src/guide/extras/render-function.md

@@ -730,95 +730,77 @@ MyComponent.inheritAttrs = false
 
 Functional components can be registered and consumed just like normal components. If you pass a function as the first argument to `h()`, it will be treated as a functional component.
 
-### Typing Functional Components
+### Typing Functional Components<sup class="vt-badge ts" /> {#typing-functional-components}
 
-Functional Components can be typed based on whether they are named or anonymous. Volar will warn you if you are not using the right props. It will show you the right types for events that are emitted by them if you are using the right name.  
+Functional Components can be typed based on whether they are named or anonymous. Volar also supports type checking properly typed functional components when consuming them in SFC templates.
 
 **Named Functional Component**
 
-
 ```tsx
-import type { SetupContext } from "vue";
-
+import type { SetupContext } from 'vue'
 type FComponentProps = {
-  message:string
+  message: string
 }
 
 type Events = {
-  sendMessage(message:string):void
+  sendMessage(message: string): void
 }
 
-function FComponent(props:FComponentProps, context:SetupContext<Events>) {
-
-  return <button onClick={()=>context.emit("sendMessage", props.message)}>
-  {props.message}
-  </button>
-
+function FComponent(
+  props: FComponentProps,
+  context: SetupContext<Events>
+) {
+  return (
+    <button onClick={() => context.emit('sendMessage', props.message)}>
+        {props.message} {' '}
+    </button>
+  )
 }
-  
- FComponentProps.props={
-  message:{
-    type:String,
-    required:true
-  },
-  }
-  
-  FComponent.emits={
-    sendMessage:(value)=> typeof value === "string"
+
+FComponent.props = {
+  message: {
+    type: String,
+    required: true
   }
+}
 
+FComponent.emits = {
+  sendMessage: (value: unknown) => typeof value === 'string'
+}
 ```
 
-
 **Anonymous Functional Component**
 
 ```tsx
 import type { FunctionalComponent } from 'vue'
 
-type FComponent = {
-  message:string
+type FComponentProps = {
+  message: string
 }
 
 type Events = {
-  sendMessage(message:string):void
+  sendMessage(message: string): void
 }
 
-const FComponent:FunctionalComponent<FComponentProps,Events> = (props, context) {
-
-  return <button 
-  onClick={()=>context.emit("sendMessage", props.message)}
-  >
-  {props.message}
-  </button>
-
+const FComponent: FunctionalComponent<FComponentProps, Events> = (
+  props,
+  context
+) => {
+  return (
+    <button onClick={() => context.emit('sendMessage', props.message)}>
+        {props.message} {' '}
+    </button>
+  )
 }
 
-  FComponent.props={
-  message:{
-    type:String,
-    required:true
-  },
-  }
-  
-  FComponent.emits={
-    sendMessage:(value)=> typeof value === "string"
+FComponent.props = {
+  message: {
+    type: String,
+    required: true
   }
-  
-```
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+}
 
-  
+FComponent.emits = {
+  sendMessage: (value) => typeof value === 'string'
+}
+```