通过反应状态控制音频标签

Question

我的反应组件有这个代码:

componentDidMount() {
    this.setState({
      audioContainer: document.getElementById('audio'),
    });
  }

在需要时我会运行一些动作:

this.state.audioContainer.start()

我认为这不是最好的选择.

按照上面的解决方案我做了这个:

从'react'导入React; 从'prop-types'导入PropTypes;

class AudioControl extends React.Component {

  componentDidMount() {
    if (this.props.start) {
      this.start();
    }
  }

  componentWillReceiveProps({ start }) {
    if (start !== this.props.start && start === true) {
      this.start();
    }
  }

  start() {
    this._audio.start();
  }

  render() {
    return (
      <audio ref={a => this._audio = a}>
        <source src="url" type="audio/mp3" />
      </audio>
    );
  }
}

AudioControl.defaultProps = {
  start: false,
};

AudioControl.propTypes = {
  start: PropTypes.bool,
};


export default AudioControl;

我在Parent Component导入:

<AudioControl start />

我得到了这个错误:动态页面加载失败TypeError:this._audio.start不是一个函数

Answer 1

不建议使用state来保持对DOM元素的引用.使用React ref代替,使用实例变量.

class AudioControl extends React.Component{

  start(){
    this._audio.play()
  }

  render(){
    return (
      //..
      <audio ref={(a) => this._audio = a} />
      //..
    )
  }
}