从 class 引用到功能组件

Question

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

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

父 class.

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>
  );
}

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

我哪里错了？？

Answer 1

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

例如

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

从 class 引用到功能组件

Ref from class to functional component

javascript

reactjs

react-ref