访问子引用而不从父引用传递

时间:2018-10-17 17:54:26

标签: reactjs

我知道我可以像这样访问孩子的裁判

ParentComponent extends React.Component {

  constructor() {
    this.myRef = React.createRef();
  }


  render() {
    return (
    <ChildComponent>
      <div ref={myRef}>Blah</div>
    <ChildComponent>
    );
  }
}

ChildComponent extends React.Component {

  render() {
    const {children} = this.props.children;
    console.log(children.ref) // Will get DOM element
    return {children}
  }
}

但是有没有一种方法可以获取DOM元素而不传递父组件的引用,以便我的子组件可以从this.props.children中获取引用?

在较高的层次上,我正在尝试制作一个可扩展的组件ChildComponent,以便每个使用ChildComponent的父组件都不必为子组件声明引用。

1 个答案:

答案 0 :(得分:0)

在这里Getting DOM node from React child element

找到了答案

答案有点老了,所以我用回调引用重写了一部分,而不是使用findDOMNode(https://github.com/yannickcr/eslint-plugin-react/issues/678)。

ParentComponent extends React.Component {
  constructor() {
    this.myRef = React.createRef();
  }

  render() {
    return (
    <ChildComponent>
      <div ref={myRef}>Blah</div>
    <ChildComponent>
    );
  }
}

ChildComponent extends React.Component {

  constructor() {
    this.myElement = null;
    this.myRef = element => {
      this.myElement = element;
    };
  }

  render() {
    const {children} = this.props.children;
    return (
    <div> 
     {React.cloneElement(children, { ref: this.myRef})};
    </div>
    )
  }
}

注意:以上内容仅适用于仅具有父级子级的子级子级