react行内style样式添加的问题

Question

问题：
react里style={}里放入一个对象为什么样式没生效？

代码：

loadCssFunc = ()=>{
    return {
        color:'red',
        fontSize:12
    }
}

//render()

<div style={this.loadCssFunc}></div>

是不是不可以用这种写法

Answer 1

补充：可以用，但大家一般情况下不会这么用哦。
除非你需要在执行完一个方法后，给样式加一个动态的值。比如当你执行完这个方法之后把fontSize改变：

loadCssFunc = (fontSize)=>{
    return {
        color:'red',
        fontSize: fontSize
    }
}

—————————————————————————————————————————————————

style本身就不是个方法，loadCssFunc是个方法，执行了才返回对象

loadCssFunc = ()=>{
    return {
        color:'red',
        fontSize:12
    }
}

//render()

<div style={this.loadCssFunc()}></div>

或者

<div style={{color:'red',fontSize:12}}></div>

Answer 2

补充：可以用。
除非你有这样的需求，当执行完一个方法后需要给样式添加动态的值，比如：

loadCssFunc = (fontSize)=>{
    return {
        color:'red',
        fontSize: fontSize
    }
}

——————————————————————————————————————————

style接收的是对象，你生成对象的方法得去执行才行。一般不使用执行方法去返回样式，普遍写法是这样：

render(){
    const style = {
        color: 'red',
        fontSize: 12
    }
    return(
        <div style={style}></div>
    )
}

or

<div style={{color: 'red', fontSize: 12}}></div>

Answer 3

const loadCssFunc = {
        color:'red',
        fontSize:12
    }

//render()

<div style={loadCssFunc}></div>