从类引用到功能组件答案

【问题标题】：Ref from class to functional component从类引用到功能组件
【发布时间】：2021-01-17 02:36:54
【问题描述】：

我使用父类的ref 来访问子类。

但是在这种情况下，我想从父类访问子功能组件。

在父类中。

class Waveform extends Component {

  constructor(props){
    super(props);
    this.track_0Ref = React.createRef();
  }
  handlePlay = () => {
    console.log("play button click");
    var node = this.track_0Ref.current
    console.log(node); //  show null......
  }
  render() {
    return (
      <AudioTrack trackNum="0" ref={this.track_0Ref}/>
    )
  }
}

在子功能组件中。

const AudioTrack = (props) => {
  useEffect(() => {});
  return(  
    <GridContainer>
    <PlayButton onClick={this.handlePlay} />
    <div id=track0 ></div>
    </GridContainer>
  );
}

父类中似乎没有对象this.track_0Ref.current...

我应该错在哪里？？

【问题讨论】：

您希望在 ref 中究竟是哪个对象？你想用它做什么？

标签： javascript reactjs react-ref

【解决方案1】：

AudioTrack 需要将通过props.ref 提供的ref 转发到实际的DOM 元素。

例如

<div id="track0" ref={props.ref}/>

【讨论】：

我明白了，也许我想错了。 ref 用于 dom 对象而不是组件本身。非常感谢