React - 동적으로 속성을 생성하는 방법

Question

2 개의 속성이 2 개의 소품 : aria-hidden과 aria-label에 연결되어 있습니다.
aria-hidden이 참일 때, 그 중 하나만 표시됩니다. false이면 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> 
    ); 
}