TypeScript与React中如何使用ref

父组件

在父组件中，编写如下：

类中定义child,用于存放子组件的作用域
```
public child: any;Copy to clipboardErrorCopied
```

绑定子组件作用域

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

子组件上绑定ref

<ChildPage onRef={(el)=>this.onRef(el)} />Copy to clipboardErrorCopied

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

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

子组件

在子组件中，编写如下：

constructor中onRef绑定this

this.props.onRef(this)Copy to clipboardErrorCopied

完成以上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 (<div><span>父组件</span><ChildCom onRef={this.onRef}></ChildCom></div>)}
}
interface childProps{onRef? : any
}
export class ChildCom extends React.Component<childProps, {}> {constructor(props:{}){super(props);this.props.onRef(this);}testFun(){console.log(123)}render(){return (<div><span>子组件</span></div>)}
}

TypeScript与React中如何使用ref相关推荐

React中如何使用ref
1.React中的ref是用来干什么的? 用来获取组件的dom对象,便于我们想要去操作dom元素 2.如何获取ref并使用 2.1.类组件(使用React.createRef()方法) import ...
react中ref的使用
在react中获取真实dom的时候就需要用到ref属性,具体使用如下 var MyComponent = React.createClass({handleClick: function() {con ...
如何在React中使用Typescript
TypeScript can be very helpful to React developers. TypeScript对React开发人员可能非常有帮助. In this video, Ben ...
React中ref的使用方法
React中ref的使用方法在react典型的数据流中, props 传递是父子组件交互的唯一方式:通过传递一个新的 props 值来使子组件重新 re-render ,从而达到父子组件通信.当然, ...
我如何使用React和Typescript在freeCodeCamp中构建天气应用
by Kelvin Mai 通过凯文麦我如何使用React和Typescript在freeCodeCamp中构建天气应用 (How I built the weather app in freeCo ...
react中的state、props、ref
state state顾名思义就是状态,它只是用来控制这个组件本身自己的状态,我们可以用state来完成对行为的控制.数据的更新.界面的渲染,由于组件不能修改传入的props,所以需要记录自身的数据变 ...
在 React 中使用 TypeScript
Create React App 内置了对 TypeScript 的支持. 需要创建一个使用 TypeScript 的新项目,在终端运行: npx create-react-app my-app -- ...
react中ref已废弃，请使用React.createRef()
在项目开发过程中难免会从操作dom,在react中获取dom的方式 (1)ref(已废弃) //绑定ref <input ref="getInput"/> //获取do ...
React 中ref 的使用（类组件和函数组件）以及forwardRef 与 useImperativeHandle 详解
前言在一个父组件中,我们想要获取到其中的节点元素或者子组件实例,从而直接调用其上面的方法.Class 类组件和函数组件是两种不同的写法. 1. Class 组件中使用ref 在 React 的 Cl ...

TypeScript与React中如何使用ref

父组件

子组件

TypeScript与React中如何使用ref相关推荐

最新文章

热门文章