React Js Es6 风格的三元运算符答案

【问题标题】：Ternary operator on style with React Js Es 6React Js Es6 风格的三元运算符
【发布时间】：2017-04-26 20:04:21
【问题描述】：

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

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

【问题讨论】：

这是正确的做法：style={ isLoggedIn ? { display:'block'} : {display:'none'} }
我已经加了同一个答案的哥们
Doh，是的，只是在这里写出来，忽略引号。漫长的一天...

标签： reactjs ecmascript-6

【解决方案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} 
  alt="" 
  style={ isLoggedIn ? { display:'block'} : {display : 'none'} }  
/>

或

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

【讨论】：

感谢@FurkanO 成功了！！