与React JS ES 6的样式的三元操作员

Question

我正在尝试添加以下三元运算符，以显示我的按钮，如果我被登录，如果我不隐藏它。下面的以下内容使我失去了一个错误。

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

Answer 1

您为样式属性提供的内容应该是一个对象。由于我们在Curly Bracs之间的JSX中编写JS代码，因此您将对象插入其中。

请记住，您需要骆驼所有CSS道具。（font-size ==> fontsize）

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

或

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

Answer 2

三元素应如下：

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

删除引号 - 它应该可以工作（假设isLoggedIn是布尔语）。

Answer 3

在以防万一，而不是插入样式的样式中可能要使用样式const下的值，这是一种方法：

function nameFunction(props) {
    return (
        <Button style={props.isSelected ? styles.Active : styles.Inactive }>{props.title}</Button>
    );
}
const styles = {
    Active: {
        backgroundColor: 'orange'
    },
    Inactive: {
        backgroundColor: 'grey'
    },
}

Answer 4

您也可以做类似的事情：

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

其他答案看起来也不错，只是一个化妆品的变化...