鍍金池/ 問答/HTML/ react行內(nèi)style樣式添加的問題

react行內(nèi)style樣式添加的問題

問題：
react里style={}里放入一個(gè)對(duì)象為什么樣式?jīng)]生效？

代碼：

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

//render()

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

是不是不可以用這種寫法

回答
編輯回答
朕略萌

補(bǔ)充：可以用。
除非你有這樣的需求，當(dāng)執(zhí)行完一個(gè)方法后需要給樣式添加動(dòng)態(tài)的值，比如：

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

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

style接收的是對(duì)象，你生成對(duì)象的方法得去執(zhí)行才行。一般不使用執(zhí)行方法去返回樣式，普遍寫法是這樣：

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

or

<div style={{color: 'red', fontSize: 12}}></div>
2017年11月7日 08:08
編輯回答
傲寒

補(bǔ)充：可以用，但大家一般情況下不會(huì)這么用哦。
除非你需要在執(zhí)行完一個(gè)方法后，給樣式加一個(gè)動(dòng)態(tài)的值。比如當(dāng)你執(zhí)行完這個(gè)方法之后把fontSize改變：

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

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

style本身就不是個(gè)方法，loadCssFunc是個(gè)方法，執(zhí)行了才返回對(duì)象

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

//render()

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

或者

<div style={{color:'red',fontSize:12}}></div>
2017年7月23日 07:09
編輯回答
孤客
const loadCssFunc = {
        color:'red',
        fontSize:12
    }

//render()

<div style={loadCssFunc}></div>
2017年10月13日 20:21