如何访问父组件中子组件的引用 [英] How do I access refs of a child component in the parent component

问题描述

如果我有类似的东西

<Parent>
  <Child1 />
  <Child2 />
  <Child3 />
</Parent>

我想从我有 refs="child2refs" 的 Child2 访问，我该怎么做?

And I want to access from Child2 where I have refs="child2refs", how can I do that?

推荐答案

推荐用于 16.3 之前的 React 版本

如果无法避免从 React 文档 将是:

import React, { Component } from 'react';

const Child = ({ setRef }) => <input type="text" ref={setRef} />;

class Parent extends Component {
    constructor(props) {
        super(props);
        this.setRef = this.setRef.bind(this);
    }

    componentDidMount() {
        // Calling a function on the Child DOM element
        this.childRef.focus();
    }

    setRef(input) {
        this.childRef = input;
    }

    render() {
        return <Child setRef={this.setRef} />
    }
}

Parent 将一个函数作为绑定到 Parent's this 的 prop 转发.当 React 调用 Child's ref prop setRef 时，它会将 Child's ref 分配给Parent 的 childRef 属性.

The Parent forwards a function as prop bound to Parent's this. When React calls the Child's ref prop setRef it will assign the Child's ref to the Parent's childRef property.

Ref forwarding 是一种选择加入的功能，它允许某些组件接收他们收到的 ref，并将其进一步向下传递(换句话说，转发"它)给子组件.

Ref forwarding is an opt-in feature that lets some components take a ref they receive, and pass it further down (in other words, "forward" it) to a child.

我们创建了组件，使用 React.forwardRef 转发它们的 ref.返回的 Component ref prop 必须与 React.createRef 的返回类型具有相同的类型.每当 React 挂载 DOM 节点时，使用 React.createRef 创建的 ref 的属性 current 将指向底层 DOM 节点.

We create Components that forward their ref with React.forwardRef. The returned Component ref prop must be of the same type as the return type of React.createRef. Whenever React mounts the DOM node then property current of the ref created with React.createRef will point to the underlying DOM node.

import React from "react";

const LibraryButton = React.forwardRef((props, ref) => (
  <button ref={ref} {...props}>
    FancyButton
  </button>
));

class AutoFocus extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
    this.onClick = this.onClick.bind(this);
  }

  componentDidMount() {
    this.childRef.current.focus();
  }

  onClick() {
    console.log("fancy!");
  }

  render() {
    return <LibraryButton onClick={this.onClick} ref={this.childRef} />;
  }
}

转发引用 HOC 示例

创建的组件将它们的ref转发到子节点.

Forwarding refs HOC example

Created Components are forwarding their ref to a child node.

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} />;
  });
}

请参阅 React 文档中的转发引用.

See Forwarding Refs in React docs.

这篇关于如何访问父组件中子组件的引用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！