Question

如果我有类似

的话

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

我希望从Child2访问refs="child2refs"，我该怎么办？

Answer 1

转发引用HOC示例

已创建的组件正在将其ref转发给子节点。

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 docs中的Forwarding Refs。

Answer 2

在子组件内部添加一个ref到您需要的节点
在父组件内添加一个引用到子组件。

/*
* Child component
*/
class Child extends React.Component {
  render() {
    return (
      <div id="child">
        <h1 ref={(node) => { this.heading = node; }}>
          Child
        </h1>
      </div>
    );
  }
}

/*
 * Parent component
 */
class Parent extends React.Component {
  componentDidMount() {
    // Access child component refs via parent component instance like this
    console.log(this.child.heading.getDOMNode());
  }

  render() {
    return (
      <div>
        <Child
          ref={(node) => { this.child = node; }}
        />
      </div>
    );
  }
}

演示：https://codepen.io/itsfadnis/pen/aLWVVx?editors=0011

Answer 3

首先使用this.props.children访问孩子，然后每个孩子都会将ref作为属性。

Answer 4

使用Ref转发，您可以将ref从父级传递到子级。

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

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

通过调用React.createRef创建一个React ref，并将其分配给ref变量。
通过将您的引用指定为JSX属性来将其传递给
React将ref传递给forwardRef内的（props，ref）=> ...函数作为第二个参数。
通过将此ref参数指定为JSX属性，将其转发至下一个。
附加参考时，参考当前将指向DOM节点。

注意仅当使用React.forwardRef调用定义组件时，第二个ref参数才存在。常规函数或类组件不会接收ref参数，并且ref在props中也不可用。

引用转发不限于DOM组件。您也可以将引用转发到类组件实例。

参考：React文档。

Answer 5

以下是我解决动态组件问题的方法：

在父组件上，动态创建对子组件的引用，例如：

class Form extends Component {
    fieldRefs: [];

    // dynamically create the child references on mount/init
    componentWillMount = () => {
        this.fieldRefs = [];
        for(let f of this.props.children) {
            if (f && f.type.name == 'FormField') {
                f.ref = createRef();
                this.fieldRefs.push(f);
            }
        }
    }

    // used later to retrieve values of the dynamic children refs
    public getFields = () => {
        let data = {};

        for(let r of this.fieldRefs) {
            let f = r.ref.current;
            data[f.props.id] = f.field.current.value;
        }

        return data;
    }
}

子组件（即）实现它自己的“字段”引用，从父组件引用：

class FormField extends Component {
    field = createRef();
    
    render() {
        return(
            <input ref={this.field} type={type} />
        );
    }
}

然后在您的主页，“父级的父级”组件中，您可以从引用中获取字段值：

class Page extends Component {
    form = createRef();

    onSubmit = () => {
        let fields = this.form.current.getFields();
    }

    render() {
        return (
            <Form ref={this.form}>
                <FormField id="email" type="email" autoComplete="email" label="E-mail" />
                <FormField id="password" type="password" autoComplete="password" label="Password" />

                <div class="button" onClick={this.onSubmit}>Submit</div>
            </Form>
        );
    }
}

我实现这个是因为我想从一个主要的

Answer 6

这里是一个示例，该示例将重点介绍使用refs（在React 16.8.6中测试）的输入：

子组件：

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return (<input type="text" ref={this.myRef} />);
  }
}

内部包含“子级”组件的“父级”组件：

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }
  componentDidMount() {
    this.childRef.current.myRef.current.focus();
  }
  render() {
    return <Child ref={this.childRef} />;
  }
}

ReactDOM.render(
    <Parent />,
    document.getElementById('container')
);

具有this.props.children的Parent组件：

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.childRef = React.createRef();
    }
    componentDidMount() {
        this.childRef.current.myRef.current.focus();
    }
    render() {
        const ChildComponentWithRef = React.forwardRef((props, ref) =>
            React.cloneElement(this.props.children, {
                ...props,
                ref
            })
        );
        return <ChildComponentWithRef ref={this.childRef} />
    }
}

ReactDOM.render(
    <Parent>
        <Child />
    </Parent>,
    document.getElementById('container')
);

Answer 7

我认为本指南对其进行了很好的解释https://github.com/yannickcr/eslint-plugin-react/issues/678

class Field extends Component {
  const { inputRef } = this.props;
  render() {
    return (
      <input type="text" ref={inputRef} />
    )
  }
}

class MyComponent extends Component {
  componentDidMount() {
    this.inputNode.focus();
  }

  render() {
    return (
      <div>
        Hello, <Field inputRef={node => this.inputNode = node} />
      </div>
    )
  }
}

如何访问父组件中子组件的引用

7 个答案:

推荐用于16.3之前的React版本

推荐用于React＆gt; = 16.3

转发引用HOC示例