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

是否可以通过函数定义CSS内联样式？我正在尝试这样做：

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

render（）{
变量listStyle={
职位：“相对”，
显示：（）=>{
console.log（“仍处于活动状态”）
if（this.state.open）{
返回“块”；
}
否则返回“无”；
}
return

.....
}

---

没有用。它甚至不会记录“还活着”，因此函数甚至不会执行。我知道在JS中为对象分配函数没有问题，那么会有什么结果呢？

您可以尝试这样做，更简单一些

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

}

你可以用这个

 const listStyle = {
   position: 'relative'
 }


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

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

const listStyle={
位置：'相对'
}
const checkDisplay=打开=>{
如果（打开）{
返回“块”
}
返回“无”；
}

---

让我知道这是否有效。希望这能帮助您：）

它需要一个字符串，而不是一个函数，这样它就不用麻烦执行您的函数了。当然JS允许您这样做，但这并不意味着react需要它或将按照您的期望处理它。或者，如果您非常倾向于执行一个返回字符串的函数ed.是的，我忘记了函数（谢天谢地）不会因为它存在而自动执行。谢谢提醒！我喜欢你的第二个例子：）谢谢你分享这个OK，所以我忘了我可以（）让函数执行。它不会因为我放了“return”而自动执行“谢谢！还有，第一个选择是更为优雅。当然，出于某种原因，我完全不去做那件事。它是有效的！我要和其他答案一起去，因为它更优雅，但是你要接受这个1，你应得的。）完美，高兴地听到这项工作：是的，另一个我也很喜欢。）