reactjs - 在按钮的样式属性中 react 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>

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