javascript - 在条件下将样式对象显示从 'none' 更改为 'flex'

Question

我有一个组件，我希望在我将某些内容加载到我的应用程序中之前将其隐藏。目前我正在使用样式对象来设置组件的样式。我想在运行函数时将 styles={display:'none'} 更改为 styles={display:'flex'} 。目前我正在尝试更改样式对象，然后将其传递给语音组件，但它不会完全隐藏按钮。我只能让他们的样式改变到他们作为灰色背景存在的地步。有人可以帮忙吗？

  showAudio = () =>{
    this.setState({showBtn: true})
    console.log("show buttons")
  }

audioStyles = () =>{
    if(this.state.showBtn===false){
    var styles={
      container: {

        transform: 'translate(0%, 0%)',
        zIndex: '4',
        width: '10%',
        display: 'none',
        margin: 'auto'

        },
        play: {
          button: {
            width: '2em',
            height: '2em',
            cursor: 'pointer',
            pointerEvents: 'none',
            outline: 'hidden',
            backgroundColor: 'white',
            border: 'hidden',
            display: 'hidden',
            borderRadius: 6
          }
        },
        pause: {
          button: {
            width: '2em',
            height: '2em',
            cursor: 'pointer',
            pointerEvents: 'none',
            outline: 'none',
            backgroundColor: 'white',
            border: 'none',
            display: 'hidden',
            borderRadius: 6
          },
        },

        resume: {
          button: {
            width: '2em',
            height: '2em',
            cursor: 'pointer',
            pointerEvents: 'none',
            outline: 'none',
            backgroundColor: 'white',
            border: 'none',
            display: 'hidden',
            borderRadius: 6
          },
        }
      };


    }else{
    var styles={
        container: {

          transform: 'translate(0%, 0%)',
          zIndex: '4',
          width: '10%',
          display: 'flex',
          margin: 'auto'
          },
          play: {
            button: {
              width: '2em',
              height: '2em',
              cursor: 'pointer',
              pointerEvents: 'none',
              outline: 'none',
              backgroundColor: 'white',
              border: 'none',
              borderRadius: 6
            }
          },
          pause: {
            button: {
              width: '2em',
              height: '2em',
              cursor: 'pointer',
              pointerEvents: 'none',
              outline: 'none',
              backgroundColor: 'white',
              border: 'none',
              borderRadius: 6
            },
          },

          resume: {
            button: {
              width: '2em',
              height: '2em',
              cursor: 'pointer',
              pointerEvents: 'none',
              outline: 'none',
              backgroundColor: 'white',
              border: 'none',
              borderRadius: 6
            },
          }
      }
    }
        return styles
    }


// my speech component which is being styled

<Speech id = "speechModule" text= {this.state.textToReadAloud} resume={true} pause={true} styles={this.audioStyles} rate={0.8} voice="Google UK English Female"/>

我希望从组件呈现的整个系列的按钮完全隐藏。如果有人可以告诉我如何隐藏整个组件，那也可以。

Answer 1

您可以使用此模式来实现您的目标。

class SomeComponent extends React.Component {
    constructor() {
    super();
    this.state = {
        isDone: false
    }
  }

  doSomething() {
    // do something here

    // after everything is done change the state isDone to true
    this.setState({
        isDone: true
    });    
  }

  render() {
    let content = '<p>Loading...</p>';

    if (this.state.isDone) {
        content = '<h1>Hello world</h1>';
    }

    return content;
  }

}

所以让我向你解释一下，首先在初始化组件时我们将默认状态 isDone 设置为 false，然后 render() 将被触发并将检查 this.state.isDone 是真还是假。 content 的值取决于您所在的州。然后你可以调用 doSomething() 方法来根据你的应用程序的需要改变你的状态。在调用 doSomething() 之后，render() 将再次执行，因为我们使用 this.setState() 方法更改了组件的状态。