jsx style with条件

Question

私はのクラス名で状態を行うことができますが、スタイルはどうですか？ 、

<span style={obj.name == 'active' ? {float:'right'} : {}}>Something</span> 

別：上記JSXため

<span style={{float:'right'}}>Something</span> 

などは、私はあなたが全体のstyleのみobject.name == 'active'をしたい場合は右の場合obj.nameは、'active'

Answer 1

一つの方法に等しいフロートしたいです条件を個別に設定する場合はstyle property値：

<span style={{float: obj.name == 'active' ? 'right' : ''}}>Something</span> 

Answer 2

また、コンポーネントのレンダリングレンダリングでこれを設定することもできます。私は個人的に、これは全体的に読みやすく解決することだと思う：

render() { 
    let customStyles = obj.name === 'active' ? { float: 'right' } : {}; 
    return (<span style={customStyles}>Something</span>); 
} 

あなたはもちろんの仕事に、このためのスコープでobjを持っている必要があります。

Answer 3

以下のパターンに従うことができます。任意の条件を指定するための

reder(){ 
return(
let myStyle = {float:right; marginBottom:10;} //in JSX/JS hyphen sign is replaced with Camel case notation, it will automatically detected by ReactDOM renderer. 
<span style={myStyle}></span> 
); 
} 

：の

reder(){ 
return(
let myStyle = (obj.name == "active") ? {float:right; marginBottom:10;} : {}; 
<span style={myStyle}></span> 
); 
}