在React.js中转发ref
将ref传递到子组件称为转发ref。React提供了createRef函数来为元素创建一个ref。
forwardRef是将ref传递给子组件的函数。
示例
// ExampleRef.js
const ExampleTextInput = React.forwardRef((props, ref) => (
<input type="text" placeholder="Welcome" ref={ref} />
));
const exampleInputRef = React.createRef();
class NewTextInput extends React.Component {
handleFormSubmit = e => {
e.preventDefault();
console.log(“Entered value: ”+exampleInputRef.current.value);
};
render() {
return (
<div>
<form onSubmit={e => this.handleFormSubmit(e)}>
<NewTextInput ref={exampleInputRef} />
<button>Submit</button>
</form>
</div>
);
}
}顾名思义，引用转发只是接收引用并将其传递给子组件。
ExampleTextInput内部的子组件输入通过React.forwardRef函数接收引用。
创建forwardref的步骤
用于创建引用并将其分配给变量元素的React.createRef
使用jsx属性将上面创建的引用附加到组件
使用ref的组件具有forwardref函数，该函数接受props和ref作为参数。
ref参数传递给子组件
子组件使用ref作为jsx属性
通过将其指定为JSX属性，我们将此ref参数向下转发到<buttonref={ref}>。
连接ref后，ref.current将指向<button>DOM节点。
将forwardRef与高阶组件一起使用-
示例
const InputHoc = ProvidedComponent => {
const forwardRef = (props, ref) => {
const onValueInput = () => console.log(“ref value: ”+ref.current.value);
return < ProvidedComponent
forwardedRef={ref}
onChange={onValueInput}
{...props} />;
};
return React.forwardRef(forwardRef);
};