Question

我正在尝试添加以下三元运算符以显示我的按钮，如果我已登录并且如果我不隐藏它。以下内容不断给我一个错误。

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

Answer 1

您为style属性提供的内容应该是一个对象。因为我们在花括号之间用jsx编写js代码，所以你会在那里插入一个对象。

记住，你需要camelCase所有的css道具。（font-size ==＆gt; 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

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

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

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

Answer 3

三元应如下所示：

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

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

React Js Es 6风格的三元算子

3 个答案: