2016-04-09 13 views
3

ReactコンポーネントのtabIndex属性を条件付きで条件付きで設定するにはどうすれば '無効'属性が設定されていると言えますか?JSX +の動的tabIndex属性

値を設定したり、属性をすべて削除する必要があります。

最初の試みは、全体の属性キーと値を変数にすることでした。

<div { tabIndex } ></div> 

をコンパイラは文句を言います。私の実際のコンポーネントは、それらの属性のトンを持っていると私は重複したコードを大量に持ってしまうと思いますので、これは望ましいことではない

const div; 
if(condition){ 
    div = <div tabIndex="1"></div> 
}else{ 
    div = <div></div> 
} 

考え直しはしました。

私の唯一の他の考え方は、refを使用し、次にtabindex属性を設定するためにjQueryを使用することでしたが、そうする必要はありません。

すべてのアイデア?あなたはattribute spread operatorを使用してそれを行うことができます

答えて

10

let props = condition ? {tabIndex: 1} : {}; 
let div = <div {...props} /> 
+0

パーフェクト。ありがとうございました! –

+0

これはチェックボックスのチェックにも最適です! –