javascript - 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'
        }
    })()

}