Question

我想获取Child组件的引用。最好的方法是什么？

class Child extends React.Component {
  render() {
    return <div>Child</div>;
  }
}   

class GetRef extends React.Component {

  componentDidMount() {
     console.log(this.props.children.ref)
  }


  render() {
    return this.props.children
  }
}

编辑：所以我可以这样使用它

<GetRef><Child/></GetRef>

Answer 1

我假设GetRef个孩子只有一个孩子，那么您可以使用此代码检索唯一child个组件的引用

class Child extends React.Component {

  render() {
    return <div>Child</div>;
  }
}  

class GetRef extends React.Component {

  componentDidMount() {
    console.log(this.ref);
  }

  render() {
    const childElement = React.Children.only(this.props.children);

    return React.cloneElement(
      childElement, 
      { ref: el => this.ref = el }
    );
  }

}

class App extends Component {

  render() {
    return <GetRef><Child/></GetRef>;
  }

}

这是complete example上的闪电战

如果this.props.children有多个孩子，则需要迭代这些孩子并将所有refs存储到一个数组中

Answer 2

可以在这里使用forwardRef：

class GetRef extends React.Component {
    render() {
        console.log(this.props.forwardRef)
    }
}

const ref = React.createRef();
<Child forwardRef={ref} />

或者，您也可以使用：

<Child ref="childRef" .../>


// In the parent component
React.findDOMNode(this.refs.childRef)

但是请看一下Exposing DOM Refs to Parent Components，以了解是否使用ref：

在极少数情况下，您可能希望从父组件访问子DOM节点。通常不建议这样做，因为它会破坏组件的封装，但有时可用于触发焦点或测量子DOM节点的大小或位置。

是否可以获取props.children的参考？

2 个答案: