javascript - 如果父级display:block，则Wavesurfer不会渲染

我遇到一个与此处突出显示的问题类似的问题

https://github.com/katspaugh/wavesurfer.js/issues/960

我有一个Waveurfer出现在React组件中。如果使用其父级display：block进行渲染，则一切都很好，但是，如果使用display：none进行渲染，则后来更改为display：block，该波形将不渲染。实际的“ wave”元素仍然具有显示为“ none”的属性

这是wavesurfer代码

this.wavesurfer = WaveSurfer.create({
  container: this.$waveform,
  waveColor: 'grey',
  progressColor: 'purple',
  backend: 'MediaElement',
  height: 80,
  width: '100%',
  plugins: [
    TimelinePlugin.create({
      container: '#wave-timeline',
    }),
    RegionPlugin.create({
      dragSelection: true,
      drag: false,
    }),
  ],
})

是父母

    <div className={!isSceneMenuVisible ? 'hide' : 'show'}>

和CSS

.hide {
  display: none;
}
.show {
  display: block;
}

最佳答案

啊..

使用visibility: hidden代替，否则无法获取尺寸。

https://github.com/katspaugh/wavesurfer.js/issues/910