在按钮的样式属性中反应 Material UI 条件语句

Question

我需要在按钮的 style 属性中有一个条件。这是我的代码此时的样子。

  <Button variant="outlined" component="span" className={classes.button}>
    Choose file
  </Button>

我需要有这样的条件。

      <Button variant="outlined" component="span" className={classes.button}
style={{display: ((this.props.filename === true)? 'none' : 'block') }}
>
        Choose file
      </Button>

知道我怎样才能做到这一点吗？

参考：https : //material-ui.com/api/button/

Answer 1

你非常接近。这里唯一的技巧是通过=== true在您的条件中指定将省略变量上的类型强制，在这种情况下实际上是需要的，因为我们要检查字符串是否为空。

对此的一种解决方法是将其删除，并让 JavaScript 执行类型强制，它会检查字符串是否为空或 null：

<Button variant="outlined" component="span" className={classes.button} 
  style={{display: ((this.props.filename) ? 'none' : 'block') }}>
   Choose file
</Button>

这篇文章很好地解释了转换是如何完成的。在此 SO post 中可以找到更多在 JavaScript 中检查空字符串的方法，无论是否使用强制。