隐藏用于视觉集在React-Mic中的视觉集的元素

Question

我试图在此myrecorder组件中隐藏帆布元素：在浏览器中检查页面时可见该元素。

import React, {Component}          from 'react';
import { render }                  from 'react-dom';
import start                from '../img/start.svg';
import stop               from '../img/stop.svg';
import pause                   from '../img/pause.svg';
import { ReactMic } from 'react-mic';
class MyRecorder extends Component {
  constructor(props){
    super(props);
    this.state = {
      blobObject: null,
      isRecording: false,
      isPaused: false
    }
  }
  startOrPauseRecording= () => {
    const { isPaused, isRecording } = this.state
    if(isPaused) {
      this.setState({ isPaused: false })
    } else if(isRecording) {
      this.setState({ isPaused: true })
    } else {
      this.setState({ isRecording: true })
    }
  }
  stopRecording= () => {
    this.setState({ isRecording: false });
  }
  onStop= (blobObject) => {
    this.setState({ blobURL : blobObject.blobURL });
  }
  render() {
    const { blobURL, isRecording, isPaused } = this.state;
    const getImage = () => {
      if(isRecording && !isPaused) {
        return (`url(${pause})`)
      }
      else {
        return (`url(${start})`)
      }
    }
    return(
        <div
        style={{marginLeft: 15,}}
        >
          <ReactMic
            record={isRecording}
            pause={isPaused}
            visualSetting="none"
            audioBitsPerSecond= {128000}
            onStop={this.onStop}
            onStart={this.onStart}
            onSave={this.onSave}
            strokeColor="#000000" />
            <audio ref="" controls="controls" src={blobURL}></audio>
          <br />
          <br />
          <button
            className="btn btn-light recButton"
            style={{
              backgroundImage: `url(${isRecording && !isPaused? pause : start})`,
              width:40,
              height:40,
            }}
            onClick={this.startOrPauseRecording}>
          </button>
          <button
            className="btn btn-light recButton"
            disabled={!isRecording}
            style={{
              backgroundImage: `url(${stop})`,
              width:40,
              height:40,
            }}
            onClick={this.stopRecording}>
          </button>
          <br />
        </div>
    );
  }
}
export default MyRecorder;

视觉集为：

visualSetting="sinewave"

将其更改为： 之后，在画布中显示了

正弦波

visualSetting="none"

波浪消失了，但画布元素仍然存在。任何想法如何摆脱元素？

Answer 1

我能够找到解决方法。在文件中 node_modules/react-mic/es/components/ReactMic.js

更改130行从：

更改

return React.createElement('canvas', { ref: 'visualizer', height: height, width: width, className: this.props.className });

to：

return React.createElement('canvas', { ref: 'visualizer', height: 0, width: 0, className: this.props.className });