ReactJS：使用函数定义样式属性

Question

is it possible to define CSS inline styles by a function? I'm trying to do this:

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

To no avail. It won't even log "Still alive", so the function doesn't even execute. I know there's no problem with assigning functions to objects in JS, so what gives?

Answer 1

You can try to do like this, more simple

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

I think the style object just access the value in properties

but if you really like function. you can use self-executing anonymous function to make it run

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

}

Answer 2

You can go with this

 const listStyle = {
   position: 'relative'
 }


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

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

Let me know if that work. Hope that can help you :)