23、ref
用过 Vue 的同学，在使用 React 的 ref 时，注意不要混淆。
在 Vue 中，ref 绑定的 DOM 元素，可以直接在组件实例里，通过 this.$refs.xxx 来获取。
但是在 React 中，ref 的属性的值，是一个函数；
函数的参数是当前 DOM 标签，或是组件实例；
于是你可以在函数体内，通过 this.xxx = xxxx 来将该 DOM 赋值给组件的某个变量。
这样就实现了类似 Vue 的 refs 的功能。
给一个示例：
class RefsDemo extends React.Component {
constructor() {
super()
this.state = {
display: ''
}
}
render() {
return <p>
<p type="text" ref={(input) => {
this.textInput = input
}}></p>
</p>
}
componentDidMount() {
console.log(this.textInput)
}
}
输出结果：
<input type="text">
1
当然也可以用来获取子组件：
class ChildDemo extends React.Component {
render() {
return <p>123</p>
}
}
class RefsDemo extends React.Component {
constructor() {
super()
this.state = {
display: ''
}
}
render() {
return <p>
<ChildDemo ref={(child) => {
this.child = child
}}/>
</p>
}
componentDidMount() {
console.log(this.child)
}
}
输出：
ChildDemo {props: {…}, context: {…}, refs: {…}, updater: {…}, _reactInternalFiber: FiberNode, …}
1
父组件获取子组件的 DOM：
首先，我们知道， 不能 直接通过父元素传 props 属性，然后将该 DOM 赋值给这个属性；
所以我们可以用常规的方法：即父组件传一个赋值函数给子组件，然后子组件在 ref 中调用这个函数即可。
示例：
class ChildDemo extends React.Component {
render() {
return <p>
<input type="text" ref={this.props.getInput}/>
</p>
}
}
class RefsDemo extends React.Component {
render() {
return <p>
<ChildDemo getInput={this.getInput.bind(this)}/>
</p>
}
getInput(DOM) {
console.log(DOM)
this.myInput = DOM
}
}
如果熟悉 React 的基本功，那么写出以上代码是毫无难度的。
但是，getInput 这个方法其实并没有必要独立出来，因为他的逻辑很简单，所以完全可以直接将这个函数作为 props 直接传入子组件，这也就有了 React 的教程上的示例。
class ChildDemo extends React.Component {
render() {
return <p>
<input type="text" ref={this.props.getInput}/>
</p>
}
}
class RefsDemo extends React.Component {
render() {
return <p>
{/* 因为函数简单，所以直接写到这里，箭头函数自带绑定this到声明时的作用域 */}
<ChildDemo getInput={DOM => {
console.log(DOM)
this.myInput = DOM
}}/>
</p>
}
// 注释掉
// getInput(DOM) {
// console.log(DOM)
// this.myInput = DOM
// }
}
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
我要评论
网友评论