如何在不使用其他库的情况下在react组件中编写内联css？

Question

var Mynav = React.createClass({
    render:function(){
        return(
            <div /*style="font-size:100px;"*/>this is my nav bar</div>
        );
    }
});

React.render(<Mynav />,document.getElementById('nav'));

我怎样才能写出/*style="font-size:100px;"*/的意思？

Answer 1

您将对象传递给style道具：

style={{fontSize: '100px'}}

属性的命名与DOM元素的style对象完全相同。

有关详细信息，请参阅React documentation。

Answer 2

基于状态执行某些动态样式的简单示例如下所示：

style={{
   fontWeight: 'bold',
   color: this.state.active ? 'green' : 'red',
}}