Question

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

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
	<circle r="10" cx="100" cy="50" fill="teal"></circle>
</svg>

无济于事。它甚至不会记录“Still alive”，因此该功能甚至不执行。我知道在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'
        }
    })()

}

Answer 2

你可以使用这个

 const listStyle = {
   position: 'relative'
 }


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

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

让我知道这项工作。希望能帮到你:)。

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

2 个答案: