react行内style样式添加的问题

Question

问题：

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

代码：

loadCssFunc = ()=>{

    return {

        color:'red',

        fontSize:12

    }

}

//render()

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

是不是不可以用这种写法

Answer 1

补充：可以用，但大家一般情况下不会这么用哦。除非你需要在执行完一个方法后，给样式加一个动态的值。比如当你执行完这个方法之后把fontSize改变：loadCssFunc = (fontSize)=>{&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; color:'red',&nbsp; &nbsp; &nbsp; &nbsp; fontSize: fontSize&nbsp; &nbsp; }}—————————————————————————————————————————————————style本身就不是个方法，loadCssFunc是个方法，执行了才返回对象loadCssFunc = ()=>{&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; color:'red',&nbsp; &nbsp; &nbsp; &nbsp; fontSize:12&nbsp; &nbsp; }}//render()<div style={this.loadCssFunc()}></div>或者<div style={{color:'red',fontSize:12}}></div>

Answer 2

补充：可以用。除非你有这样的需求，当执行完一个方法后需要给样式添加动态的值，比如：loadCssFunc = (fontSize)=>{&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; color:'red',&nbsp; &nbsp; &nbsp; &nbsp; fontSize: fontSize&nbsp; &nbsp; }}——————————————————————————————————————————style接收的是对象，你生成对象的方法得去执行才行。一般不使用执行方法去返回样式，普遍写法是这样：render(){&nbsp; &nbsp; const style = {&nbsp; &nbsp; &nbsp; &nbsp; color: 'red',&nbsp; &nbsp; &nbsp; &nbsp; fontSize: 12&nbsp; &nbsp; }&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; <div style={style}></div>&nbsp; &nbsp; )}or<div style={{color: 'red', fontSize: 12}}></div>

Answer 3

const loadCssFunc = {&nbsp; &nbsp; &nbsp; &nbsp; color:'red',&nbsp; &nbsp; &nbsp; &nbsp; fontSize:12&nbsp; &nbsp; }//render()<div style={loadCssFunc}></div>