ref是React提供的用来操纵React组件实例或者DOM元素的接口。
react中ref怎么用？
React的ref有3种用法：
字符串形式(已废弃)
回调函数形式（官方推荐）
React.createRef() （React16.3提供）
字符串形式
最早的ref用法。
1、dom节点上使用，通过this.refs[refName]来引用真实的dom节点
<input ref="inputRef" /> //this.refs['inputRef']来访问
2、类组件上使用，通过this.refs[refName]来引用组件的实例
<CustomInput ref="comRef" /> //this.refs['comRef']来访问
回调函数形式
回调函数就是在dom节点或组件上挂载函数，函数的入参是dom节点或组件实例，达到的效果与字符串形式是一样的，
都是获取其引用。
回调函数的触发时机：
组件渲染后，即componentDidMount后
组件卸载后，即componentWillMount后，此时，入参为null
ref改变后
1.dom节点上使用回调函数
<input ref={(input) => {this.textInput = input;}} type="text" />2.类组件上使用
<CustomInput ref={(input) => {this.textInput = input;}} />3.可用通过props跨级传递的方式来获取子孙级dom节点或组件实例
下面是在跨两级获取到孙级别的组件内部的dom节点
function CustomTextInput(props) {
return (
<div>
<input ref={props.inputRef} />
</div>
);
}
function Parent(props) {
return (
<div>
My input: <CustomTextInput inputRef={props.inputRef} />
</div>
);
}
class Grandparent extends React.Component {
render() {
return (
<Parent
inputRef={el => this.inputElement = el}
\/>
);
}
}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}/>
}
}React.forwardRef
同样是React 16.3版本后提供的，可以用来创建子组件，以传递ref。
例如：
//子组件（通过forwardRef方法创建）
const Child=React.forwardRef((props,ref)=>(
<input ref={ref} />
));
//父组件
class Father extends React.Component{
constructor(props){
super(props);
this.myRef=React.createRef();
}
componentDidMount(){
console.log(this.myRef.current);
}
render(){
return <Child ref={this.myRef}/>
}
}子组件通过React.forwardRef来创建，可以将ref传递到内部的节点或组件，进而实现跨层级的引用。
forwardRef在高阶组件中可以获取到原始组件的实例。
例如：
//生成高阶组件
const logProps=logProps(Child);
//调用高阶组件
class Father extends React.Component{
constructor(props){
super(props);
this.myRef=React.createRef();
}
componentDidMount(){
console.log(this.myRef.current);
}
render(){
return <LogProps ref={this.myRef}/>
}
}
//HOC
function logProps(Component) {
class LogProps extends React.Component {
componentDidUpdate(prevProps) {
console.log('old props:', prevProps);
console.log('new props:', this.props);
}
render() {
const {forwardedRef, ...rest} = this.props;
// Assign the custom prop "forwardedRef" as a ref
return <Component ref={forwardedRef} {...rest} />;
}
}
// Note the second param "ref" provided by React.forwardRef.
// We can pass it along to LogProps as a regular prop, e.g. "forwardedRef"
// And it can then be attached to the Component.
return React.forwardRef((props, ref) => {
return <LogProps {...props} forwardedRef={ref} />;
});
}//生成高阶组件
const logProps=logProps(Child);
//调用高阶组件
class Father extends React.Component{
constructor(props){
super(props);
this.myRef=React.createRef();
}
componentDidMount(){
console.log(this.myRef.current);
}
render(){
return <LogProps ref={this.myRef}/>
}
}
//HOC
function logProps(Component) {
class LogProps extends React.Component {
componentDidUpdate(prevProps) {
console.log('old props:', prevProps);
console.log('new props:', this.props);
}
render() {
const {forwardedRef, ...rest} = this.props;
// Assign the custom prop "forwardedRef" as a ref
return <Component ref={forwardedRef} {...rest} />;
}
}
// Note the second param "ref" provided by React.forwardRef.
// We can pass it along to LogProps as a regular prop, e.g. "forwardedRef"
// And it can then be attached to the Component.
return React.forwardRef((props, ref) => {
return <LogProps {...props} forwardedRef={ref} />;
});
}注意：
ref在函数式组件上不可使用，函数式组件无实例，但是其内部的dom节点和类组件可以使用
可以通过ReactDOM.findDOMNode()，入参是一个组件或dom节点，返回值的组件对应的dom根节点或dom节点本身
通过refs获取到组件实例后，可以通过此方法来获取其对应的dom节点
React的render函数返回的是vDom(虚拟dom)
更多web前端知识，请查阅 HTML中文网 ！！
以上就是react中ref怎么用？的详细内容，更多请关注易知道|edz.cc其它相关文章！
