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

我认为这里的问题与这里描述的相同： Can withStyles pass props to styles object？

Answer 2

您非常亲密。唯一的窍门是，在您的条件中指定=== true会忽略变量的类型强制，在这种情况下实际上是必需的，因为我们要检查字符串是否为空。

对此的一种解决方法是将其删除，然后让JavaScript执行强制类型转换，该类型强制转换检查字符串是否为空或空：

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

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

Answer 3

另一种方法是创建一个单独的类：displayNone-当条件满足时，displayBlock-当不满足时。然后使用 clsx 库来组合两个类，如下所示：

      import clsx from "clsx"        
        <Button variant="outlined" component="span" 
    className={clsx(classes.button,this.props.filename? classes.displayNone:classes.displayBlock)}>
Choose file</Button>

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

3 个答案: