从类到功能组件的引用

Question

我使用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在父类…

我哪里错了??

Answer 1

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

。

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