通过vue3学习react17（二）——父组件调用子组件方法Ref(ts)

今天主要学习ref方法调用子组件的方法。reacthook和vue单文件都用到了。如果你喜欢它，你可以喜欢它。ReactuseRef只能在FunctionComponent中使用，createRef只能在ClassComponent中使用。使用useRef子组件(Child.tsx)#Child.tsxexportinterfaceChildProps{count:number;setCount:(params:ChildProps["count"])=>void;}constChild=(_props:any,ref:any)=>{让[count,setCount]=useState(0);useImperativeHandle(ref,()=>({count,setCount,}));返回(

);};exportdefaultChild;#orexportinterfaceChildProps{count:number;setCount:(params:ChildProps["count"])=>void;}interfacerefInterface{cRef:React.MutableRefObject;}constChild:React.FC=(props)=>{const{cRef}=道具;让[count,setCount]=useState(0);useImperativeHandle(cRef,()=>({count,setCount,}));返回(

{count}

</div>);};exportdefaultChild;parentgroup(Parent.tsx)#Parent.tsxfunctionParent(){constchildRef=useRef();constupdateChildState=()=>{//changeVal现在子组暴露父组方法childRef.current?.setCount(childRef.current?.count+1);};return(

安键

);}createRef子组件(Child.tsx)importReact,{useState}from"react";interfaceChildInterface{count:number;}classChildextendsReact.Component{constructor(props:React.FC){super(props);}this.state={count:0,};}render(){return(

{this.state.count}

);}setCount=(params:number)=>{this.setState({count:params,});/奇尔d";classParentextendsReact.Component{childRef:RefObject;//childRef:LegacyRef|undefined;constructor(props:React.FC){super(props);this.childRef=createRef();}render(){return(

按钮

);}updateChildCount=()=>{let{setCount,state}=this.childRef.currentasChild;setCount(state.count+1);};}exportdefaultParent;Vue3父组包含两个写法父组(Parent.vue)#Parent.vue常规写法子组件(Child.vue)#Child.vue单文件写法(setup)