在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参数向下转发到<button ref = {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);
};