リアクション - 属性を動的に作成する方法

Question

2つの属性を2つの小道具：aria-hiddenとaria-labelに接続しました。
aria-hiddenが真の場合は、それだけが表示されます。偽の場合はaria-labelと表示されます。

私はこのコードを書いていますが、DRYではありません...どうすれば改善できますか？

render() { 
    let svgMarkup = ''; 

     if (this.props.hidden) { 
      svgMarkup = (
       <svg role="img" aria-hidden="true"> 
        ... 
       </svg> 
      ); 
     } else { 
      svgMarkup = (
       <svg role="img" aria-label={ this.props.label }> 
        ... 
       </svg> 
      ); 
     } 

     return svgMarkup; 
} 

Answer 1

次に、あなたのスプレッド構文を使用してコンポーネントを反応させる小道具を適用し、プレーンなオブジェクトの小道具を設定することができます。

render() { 
    const ariaProps = this.props.hidden ? 
     { 'aria-hidden': 'true' } 
     : 
     { 'aria-label': this.props.label }; 

    return (
     <svg role="img" {...ariaProps}> 
      ... 
     </svg> 
    ); 
}