ReactJS：用函数定义样式属性

是否可以通过函数定义CSS内联样式？我试图做到这一点：ReactJS：用函数定义样式属性

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

无济于事。它甚至不会记录“仍然活着”，所以该功能甚至不执行。我知道将函数分配给JS中的对象没有问题，所以给了什么？

来源

2016-12-15 Rafael

该公司预计字符串，而不是一个功能，所以它不会刻意去执行你的功能。当然，JS允许你这样做，但这并不意味着反应会期待或者会按照你的预期处理。或者你可以在那里执行一个返回字符串的函数，如果你这么倾向。 –

是的，我忘了函数（谢天谢地）不会因为它存在而执行它自己。感谢您的提醒！ – Rafael

你可以尝试做这样的，更简单的

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

}

来源

2016-12-15 03:17:27 chanjianyi

我喜欢你的第二个例子:)谢谢你分享这个 – EQuimper

好吧，所以我忘了我可以只是（）函数来执行它。它不会因为我把“返回”放在那里而自行执行。谢谢！同样是啊，第一种选择是肯定更优雅。出于某种原因，它完全没有办法做到这一点。 – Rafael

你可以用这个

const listStyle = { 
    position: 'relative' 
} 


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

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

去让我知道，如果这项工作。希望可以帮到您:)

来源

2016-12-15 03:42:28 EQuimper

它的工作原理！我与对方的回答会，因为它更优雅，但借此+1，你活该。 ;） – Rafael

完美，很高兴听到这样的工作:)。对于另一个我也喜欢的人来说是个不错的选择;） – EQuimper

ReactJS：用函数定义样式属性

回答

相关问题