React Js Es 6을 사용한 스타일의 삼원 연산자

React Js Es 6을 사용한 스타일의 삼원 연산자

다음 3원 연산자를 추가하여 로그인 시 및 숨기지 않을 경우 버튼을 표시하려고 합니다.아래가 자꾸 오류를 일으킵니다.

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

스타일 속성에 제공하는 것은 객체여야 합니다.곱슬 괄호 사이에 js 코드를 jsx로 쓰기 때문에 오브젝트를 삽입합니다.

casel case는 casel case의 모든 소품이어야 합니다.(글꼴 크기==>글꼴 크기)

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

또는

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

3진수는 다음과 같습니다.

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

상표를 삭제합니다(전제로 동작합니다).isLoggedInboolean-ish) 입니다.

스타일을 인라인으로 표시하는 대신 styles const 아래에 있는 값을 사용하는 것이 좋습니다.

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

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

다음과 같은 작업을 수행할 수도 있습니다.

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

다른 대답들도 괜찮아 보이는데, 그냥 겉치레만 바꾸면...

언급URL : https://stackoverflow.com/questions/41092677/ternary-operator-on-style-with-react-js-es-6