易百教程

50、Ref转发是什么?

Ref 转发是一种用于将 ref 通过组件传递到其子组件之一的功能。它可以通过使用 React.forwardRef() 方法来执行。它对高阶组件特别有用,并且专门用于可重用组件库。

例子

import React, { Component } from 'react';  
import { render } from 'react-dom';  

const TextInput = React.forwardRef((props, ref) => (  
  <input type="text" placeholder="Hello World" ref={ref} />  
));  

const inputRef = React.createRef();  

class CustomTextInput extends React.Component {  
  handleSubmit = e => {  
    e.preventDefault();  
    console.log(inputRef.current.value);  
  };  
  render() {  
    return (  
      <div>  
        <form onSubmit={e => this.handleSubmit(e)}>  
          <TextInput ref={inputRef} />  
          <button>Submit</button>  
        </form>  
      </div>  
    );  
  }  
}  
export default App;