ReactJS：用函数定义样式属性答案

【问题标题】：ReactJS: Defining style attributes with functionsReactJS：用函数定义样式属性
【发布时间】：2016-12-15 12:16:04
【问题描述】：

是否可以通过函数定义 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 中为对象分配函数是没有问题的，那又是什么呢？

【问题讨论】：

它需要一个字符串，而不是一个函数，所以它不会费心去执行你的函数。当然 JS 允许你这样做，但这并不意味着 react 期待它或将按照你的预期处理它。或者，如果您愿意，您可以在那里执行一个返回字符串的函数。
是的，我忘记了该函数（谢天谢地）不会因为它存在而自行执行。感谢您的提醒！

标签： javascript css reactjs

【解决方案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'
        }
    })()

}

【讨论】：

我喜欢你的第二个例子 :) 谢谢你分享这个
好的，所以我忘了我可以 () 让它执行的函数。它不会因为我把“return”放在那里而自行执行。谢谢！是的，第一个选择肯定更优雅。出于某种原因，我完全没想到要这样做。

【解决方案2】：

你可以用这个

 const listStyle = {
   position: 'relative'
 }


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

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

让我知道这是否有效。希望对你有帮助:)

【讨论】：

有效！我会选择另一个答案，因为它更优雅，但是拿这个 +1，你应得的。 ;)
完美，很高兴听到这项工作:)。是的，另一个我也喜欢它的好选择；）