时间戳

首页 > 解决方案 > 在条件下将样式对象显示从“无”更改为“弹性”

javascript - 在条件下将样式对象显示从“无”更改为“弹性”

问题描述

我有一个想要隐藏的组件，直到我在我的应用程序中加载某些内容。目前我正在使用样式对象来设置组件的样式。我想在运行函数时将 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"/>

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

标签： javascriptcssreactjs

解决方案

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

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是 true 还是 false。的值content取决于您的状态。doSomething()然后您可以根据应用程序的需要调用方法来更改您的状态。调用后doSomething()，render()将再次执行，因为我们通过使用this.setState()方法改变了组件的状态。

推荐阅读