ReactJS : 함수로 스타일 속성 정의하기

Question

CSS 인라인 스타일을 함수로 정의 할 수 있습니까? 나는 이것을 시도하고있다 :

render() { 
var listStyle = { 
    position: "relative", 
    display:() => { 
     console.log("Still alive") 
     if(this.state.open) { 
      return "block"; 
     } 
     else return "none"; 
    } 
return <li style={listStyle}> 
..... 
} 

아무 소용이 없다. 심지어 "아직 살아있다"라고 기록하지 않기 때문에 함수는 실행되지 않습니다. JS에서 객체에 함수를 할당하는 데 아무런 문제가 없다는 것을 알고 있습니다. 그래서 무엇을 제공합니까?

Answer 1

당신은 속성

의 값에 액세스하지만 만약 정말 기능처럼 나는 스타일 개체를 생각

var listStyle = { 
    position: "relative", 
    display:this.state.open?'block':'none' 
} 

, 더 간단하게 다음과 같이 수행하려고 할 수 있습니다. 당신은 내가 그 일 경우 알려

var listStyle = { 
    position: "relative", 
    display: (()=>{ 
     console.log('alive') 
     if(this.state.open){ 
      return 'block' 
     }else{ 
      return 'none' 
     } 
    })() 

} 

Answer 2

당신이

const listStyle = { 
    position: 'relative' 
} 


const checkDisplay = open => { 
    if (open) { 
    return "block" 
    } 
    return "none"; 
} 

<li style={{...listStyle, display: checkDisplay(this.state.open)}}></li> 

로 갈 수있는 실행하기 위해 자체 실행 익명 기능을 사용할 수 있습니다. 희망이 당신을 도울 수 있습니다 :)