Question

当道具改变时，我无法激发对区域的重新渲染。这是一个简单的例子：

var React = require('react');
import { connect } from 'react-redux';
import WaveSurfer from 'react-wavesurfer';
window.WaveSurfer = require('wavesurfer.js');
let Regions = require('./Regions').default;

class SongCard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      playing: false,
      pos: 0,
      regions: {
        eoi: {
          id: 'eoi',
          start: 5,
          end: 6
        }
      }
    };
    this.togglePlay = this.togglePlay.bind(this);
    this.handleTogglePlayClick = this.handleTogglePlayClick.bind(this);
    this.handlePosChange = this.handlePosChange.bind(this);
    this.handleMoveRegionsClick = this.handleMoveRegionsClick.bind(this);
  }
  togglePlay() {
    this.setState({
      playing: !this.state.playing
    });
  }
  handleTogglePlayClick() {
    this.togglePlay();
  }
  handlePosChange({ wavesurfer, originalArgs}) {
    this.setState({
      pos: originalArgs[0]
    })
  }
  handleMoveRegionsClick() {
    const newState = Object.assign({}, this.state, {
      regions: {
        eoi: {
          start: this.state.regions.eoi.start+10,
          end: this.state.regions.eoi.end+10,
          id: 'eoi'
        }
      }
    });
    this.setState(newState);
  }
  render () {
    return (
        <div>
          <div>
            <button type="button" className="btn btn-primary btn-xs" onClick={this.handleMoveRegionsClick}>Change Region</button>
          </div>
          <WaveSurfer
            audioFile={'https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3'}
            pos={this.state.pos}
            onPosChange={this.handlePosChange}
            playing={this.state.playing}
          >
            <Regions regions={this.state.regions} />
          </WaveSurfer>
        </div>
      );
  }
};


export default SongCard;

当我在handleMoveRegionsClick（）中调用setState（）时，SongCard的状态会更新，但它不会触发重新加载Region的道具。

有人能指出我如何解决这个问题的正确方向吗？谢谢！

Answer 1

以防这有助于某人：事实证明，wavesurfer.js会覆盖shouldComponentRender（）为false，从而阻止区域移动。现在，我不得不分叉反应波浪并删除覆盖。

以编程方式更新react-wavesurfer Region并更改状态

1 个答案: