ZWkang / Start-Learning-React

Start-Learning-React
MIT License
2 stars 0 forks source link

ref #16

Open ZWkang opened 5 years ago

ZWkang commented 5 years ago

render方法后,组件是不会返回实例供我们操作使用的。

Refs提供了一种访问DOM节点或在render方法中创建的React元素的方法。

它组件被调用会新建一个实例,而refs就会指向这个实例

简单的input ref获取值例子 16.3以后的例子

我们也可以通过获得dom的引用从而去修改值 https://codesandbox.io/s/4jp88wk7kx 不过建议尽量少用。(refs中的值同样支持字符串。)

对类组件进行ref操作 https://codesandbox.io/s/3831340jkp 获得组件实例后的this。

对高阶包裹子组件如何获得ref引用呢?

https://codesandbox.io/s/p9r2qkl1jm 如果我们直接对wrappercomponennt进行使用ref,获取的是外部组件 子组件不能穿透获取。

那我们想。如果我们使用类似callback技术,将callback function在传递给childcomponent。我们是不是就能简单拿到了childcomponent的实例了呢。

example: https://codesandbox.io/s/6jmlnmr3r

16.3以后的版本还多了一个forwardRef的功能 用来转发我们的ref https://codesandbox.io/s/lxlmn93l0l

这使得我们不用再增加一些无用的get this的function去获取实例。

方便快捷


resource: