如果我在react组件中创建了一个变量，如何在状态改变时重新访问它?

If I make a variable inside a react component, how do I re-access it on a state change?

本文关键字：改变 状态 新访问 访问 一个 组件 react 创建 变量 如果      更新时间：2023-09-26

我正在制作一个react项目，并使用wavesurfer.js。当我点击播放按钮时，我将道具播放从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;

您可以通过从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;

你应该能够使用this.state.[variable]访问状态变量。在你的例子中this。state。playing和this。state。song

在React.js组件中，this.state.<state name>可以从自身内部访问所有当前state值。

相关文章：