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

Question

我的反应组件中有这段代码：

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

并且在需​​要时我会执行一些操作：

this.state.audioContainer.start()

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

按照上面的解决方案，我这样做了：

从“反应”导入反应； 从 '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;

我在父组件处导入：

<AudioControl start />

我得到了这个错误： 动态页面加载失败 TypeError: this._audio.start is not a function

Answer 1

不建议使用状态来保持对 DOM 元素的引用。改用 React ref，并带有一个实例变量。

class AudioControl extends React.Component{

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

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