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;