javascript - 如果我在 React 组件中创建一个变量，我如何在状态更改时重新访问它？

Question

我正在制作一个 React 项目并使用 wavesurfer.js。当我按下播放按钮时，我将播放的 Prop 从 false 更改为 true，用于使元素实际播放的方法是 visual.playPause();但是，我不确定在创建变量后如何获取对变量的引用(该变量是在 initWaveSurfer 函数中创建的可视变量)。任何帮助都会很棒!!

var React = require('react');
var ReactDom = require('react-dom');

var reactWaveSurfer = React.createClass({
  getInitialState: function(){
    return ({
      song: this.props.song,
      playing: this.props.playing
    });
  },
  componentDidMount: function () {
    this.initWavesurfer();
  },
  componentWillReceiveProps: function(nextProps) {
    this.setState({
      playing: nextProps.playing
    });
  },
  initWavesurfer: function () {
    var visualContainer = ReactDom.findDOMNode(this.refs.waveContainer);
    var visual = WaveSurfer.create({
      container: visualContainer,
      waveColor: 'blue',
      progressColor: 'purple',
      barWidth: '3',
      height: "90",
      maxCanvasWidth: 200
    });
    visual.load(this.state.song.audio_url);
  },
  render: function () {
    return <div className="wave-surfer" ref="waveContainer" ></div>;
  }
});

module.exports = reactWaveSurfer;

Answer 1

您可以通过从 this.initWavesurfer 返回它并从中设置您的状态来访问它。从那里，您可以通过 this.state.visual;

访问它

var React = require('react');
var ReactDom = require('react-dom');

var reactWaveSurfer = React.createClass({
  getInitialState: function(){
    return ({
      song: this.props.song,
      playing: this.props.playing
    });
  },
  componentDidMount: function () {
    this.setState({visual: this.initWavesurfer()}); //You now have access to visual thru this.state.visual
  },
  componentWillReceiveProps: function(nextProps) {
    this.setState({
      playing: nextProps.playing
    });
  },
  initWavesurfer: function () {
    var visualContainer = ReactDom.findDOMNode(this.refs.waveContainer);
    var visual = WaveSurfer.create({
      container: visualContainer,
      waveColor: 'blue',
      progressColor: 'purple',
      barWidth: '3',
      height: "90",
      maxCanvasWidth: 200
    });
    visual.load(this.state.song.audio_url);
    return visual;
  },
  render: function () {
    return <div className="wave-surfer" ref="waveContainer" ></div>;
  }
});

module.exports = reactWaveSurfer;