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>