浅析TypeScript和React中使用ref的方法-tutorial js-php.cn

TypeScript与React中如何使用ref？下面本篇文章给大家介绍一下ref用法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

浅析TypeScript和React中使用ref的方法

父组件

在父组件中，编写如下：

类中定义child，用于存放子组件的作用域

public child: any;Copy to clipboardErrorCopied

Salin selepas log masuk

绑定子组件作用域

public onRef(ref:any){ this.child = ref }Copy to clipboardErrorCopied

Salin selepas log masuk

子组件上绑定ref

this.onRef(el)} />Copy to clipboardErrorCopied

Salin selepas log masuk

onRef 绑定this(第3步，不使用箭头函数的情况)

this.onRef = this.onRef.bind(this)Copy to clipboardErrorCopied

Salin selepas log masuk

子组件

在子组件中，编写如下：

1、constructor中onRef绑定this

this.props.onRef(this)Copy to clipboardErrorCopied

Salin selepas log masuk

完成以上4步骤，父组件中可以随便调用子组件中state的值以及方法。

export class ParentCom extends React.Component<{}, {}> { constructor(props:{}){ super(props); this.onRef = this.onRef.bind(this); } public child: any; onRef(ref:any){ this.child = ref; } getChildFun(){ this.child.testFun(); } render(){ return (  父组件  
 ) } } interface childProps{ onRef? : any } export class ChildCom extends React.Component { constructor(props:{}){ super(props); this.props.onRef(this); } testFun(){ console.log(123) } render(){ return (  子组件 
 ) } }

Salin selepas log masuk

更多编程相关知识，请访问：编程视频！！

Atas ialah kandungan terperinci 浅析TypeScript和React中使用ref的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!