React Js Es6 风格的三元运算符

Posted 2023-02-22

【中文标题】React Js Es6 风格的三元运算符

【英文标题】：Ternary operator on style with React Js Es 6

【发布时间】：2017-04-26 20:04:21

【问题描述】：

我正在尝试添加以下三元运算符以在我登录时显示我的按钮，如果我不隐藏它。以下内容不断向我抛出错误。

<img src=this.state.photo  style="isLoggedIn ? 'display:' : 'display:none'"  />

【问题讨论】：

这是正确的做法：style= isLoggedIn ? display:'block' : display:'none'

我已经加了同一个答案的哥们

Doh，是的，只是在这里写出来，忽略引号。漫长的一天...

【参考方案1】：

你也可以这样做：

const styles = 
    display: isLoggedIn ? 'block' : 'none'

其他答案似乎也不错，只是表面上的改变......

【参考方案2】：

如果不想内联样式，可能想要使用样式 const 下的值，这是一种方法：

function nameFunction(props) 
    return (
        <Button style=props.isSelected ? styles.Active : styles.Inactive >props.title</Button>
    );


const styles = 
    Active: 
        backgroundColor: 'orange'
    ,
    Inactive: 
        backgroundColor: 'grey'
    ,

【参考方案3】：

三元应该如下：

style=isLoggedIn ?  display:'block'  :  display:'none' 

删除引号 - 然后它应该可以工作（假设 isLoggedIn 是一个布尔值）。

【参考方案4】：

你提供给 style 属性的应该是一个对象。由于我们在花括号之间的 jsx 中编写 js 代码，因此您将在其中插入一个对象。

请记住，您需要对所有 css 道具进行驼峰式命名。 （字体大小 ==> 字体大小）

<img 
  src=this.state.photo 
   
  style= isLoggedIn ?  display:'block' : display : 'none'   
/>

或

<img
  src=this.state.photo 
  
  style=  display: isLoggedIn ? 'block' : 'none'    
/>

【讨论】：

感谢@FurkanO 成功了！！