Reactコンポーネントの条件付き属性？

Question

私は反応が新しく、ちょっと醜いコードを書きました。誰かが私にそれをするよりよい方法を示すことができますか？ここでは擬似コードです：

let btn; 

if(this.props.href && !this.props.onClick && !this.props.dataMsg etc...) 
btn = <a href={this.props.href}>{this.props.text}</a>; 


else if(!this.props.href && this.props.onClick && !this.props.dataMsg etc...) 
btn = <a onClick={this.props.onClick}>{this.props.text}</a>; 

etc... 

else if(this.props.href && this.props.onClick && !this.props.dataMsg etc...) 
btn = <a href={this.props.href} onClick={this.props.onClick}>{this.props.text}</a>; 

else if(!this.props.href && this.props.onClick && this.props.dataMsg etc...) 
btn = <a onClick={this.props.onClick} data-msg={this.props.dataMsg}>{this.props.text}</a>; 

etc... 

言い換えれば、私は反応するコンポーネントがそれのために小道具を受けた場合にのみ、<a>要素の属性を設定します。しかし、反応成分のすべての小道具が属性であることを意図するものではなく、その一部はinnerHTMLに属するthis.props.textである可能性がある。

私が欲しいものを書くのはあまり冗長ではありませんか？

Answer 1

Reactは、undefinedを値として持つすべての属性を無視します。

したがって、ifの条件を使用する必要はありません。代わりに、値の属性を確認して値を取得しないとundefinedを返すことができます。例については

：

次のようにあなたがあなたのコードを書くことができ、

<a 
    href={this.props.href} //returns undefined if href not present in props 
    onClick={this.props.onClick && this.props.onClick} //set callback if it is present in the props 
    data-msg={this.props.dataMsg} //returns undefined if href not present in props 
> 
{this.props.text} 
</a>; 

任意の属性にundefinedを返すには、それらの属性を無視するように反応することができます。

希望すると助かります！