关于react中的ref
ref有3种用法:
字符串
dom节点上使用,通过this.refs[refName]来引用真实的dom节点
<input ref="inputRef" /> //this.refs['inputRef']来访问
回调函数
React 支持给任意组件添加特殊属性。ref 属性接受一个回调函数,它在组件被加载或卸载时会立即执行。
当给 HTML 元素添加 ref 属性时,ref 回调接收了底层的 DOM 元素作为参数。
当给组件添加 ref 属性时,ref 回调接收当前组件实例作为参数。
当组件卸载的时候,会传入null
ref 回调会在componentDidMount 或 componentDidUpdate 这些生命周期回调之前执行。
<input ref={(input) => {this.textInput = input;}} type="text" /> //HTML 元素添加 ref 属性时
<CustomInput ref={(input) => {this.textInput = input;}} /> //组件添加 ref 属性
React.createRef()
在React 16.3版本后,使用此方法来创建ref。将其赋值给一个变量,通过ref挂载在dom节点或组件上,该ref的current属性
将能拿到dom节点或组件的实例
class Child extends React.Component{
constructor(props){
super(props);
this.myRef=React.createRef();
}
componentDidMount(){
console.log(this.myRef.current);
}
render(){
return <input ref={this.myRef}/>
}
}
(2)根据ref获取dom
React提供的这个ref属性,表示为对组件真正实例的引用,其实就是ReactDOM.render()返回的组件实例,但可以通过ReactDOM.findDOMNode(ref)来获取组件挂载后真正的dom节点
var Parent = React.createClass({
render: function(){
return (
<div className = 'parent'>
<Child ref = 'child'/>
</div>
)
},
componentDidMount(){
console.log(this.refs.child); // 访问挂载在组件上ref
console.log(ReactDOM.findDOMNode(this.refs.child)); // 访问真正的dom节点
}
})
var Child = React.createClass({
render: function() {
return (
<div ref="test">
<a ref="update">更新</a>
</div>
);
}
});
打印结果
(3)react-redux使用时利用ref调用子组件方法不可用报错
在使用react的时候,我们难免会在父组件中调用子组件的方法,我们常用ref调用子组件的方法
如下在父组件中调用子组件的写法
父组件
handleShowModalAdd = () => {
this.add.handleToggle()//handleToggle为子组件中的方法
}
<SystemAdd ref={(el) => this.add = el}/>
但是当我们在子组件中使用redux的时候,由于使用connect对子组件进行了包装,会导致获取不到子组件中的方法
下面的是使用redux后的ref使用方法
父组件
handleShowModalAdd = () => {
this.add.handleToggle()//handleToggle为子组件中的方法
}
<SystemAdd onRef={(ref) => this.add = ref }/>
子组件
componentDidMount(){
this.props.onRef(this)//将组件实例this传递给onRef方法
}
在react的官方文档中也对函数式组件的ref狗子函数进行了实例
function CustomTextInput(props) {
// 这里必须声明 textInput,这样 ref 才可以引用它
const textInput = useRef(null);
function handleClick() {
textInput.current.focus();
}
return (
<div>
<input
type="text"
ref={textInput} />
<input
type="button"
value="Focus the text input"
onClick={handleClick}
/>
</div>
);
}