네이티브 드라이 조건문을 응답하십시오.

Question

다음 코드 조각은 모두 잘 작동합니다. 그러나 모든 커스텀 화를 결합 할 수 있다면 DRY를 더 잘 생성 할 수있는 방법을 찾고 있습니다.

render() { 
    let sizeHeader,milkHeader = null; 
    this.props.data.size ? sizeHeader = <Text style={styles.headerLabel}>Size</Text> : null 
    this.props.data.milk ? milkHeader = <Text style={styles.headerLabel}>Milk</Text> : null 

    return (
    <View style={styles.container}> 
     <ParallaxScrollView> 
      <View> 
      {sizeHeader} 
      {(this.props.data.size||[]).map((section,i) => (
       <AddToCartRow key={i} data={section} productName={this.props.data.name} value={Config.priceToPriceWithCurrency(section.price)} /> 
      ))} 
      {milkHeader} 
      {(this.props.data.milk||[]).map((section,i) => (
       <AddToCartRow key={i} data={section} productName={this.props.data.name} value={Config.priceToPriceWithCurrency(section.price)} /> 
      ))} 
      </View> 
     </ParallaxScrollView> 
     <RoundedButton onPress={()=>{NavigationActions.CartAndCheckout()}}> 
     Go to Cart 
     </RoundedButton> 
    </View> 
); 
} 

JSON은

{ 
    "Merchants" : { 
    "items" : [ { 
     "address" : "address here", 
     "items" : [ { 
     "description" : "Silky frothed milk poured over a shot of espresso, topped with a touch of chocolate.", 
     "info" : { 
      "Calories" : "250 kcal", 
      "Glutten Free" : "Yes" 
     }, 
     "milk" : [ { 
      "name" : "Full Cream", 
      "price" : 0 
     }, { 
      "name" : "Almond", 
      "price" : ".5" 
     }, { 
      "name" : "Coconut", 
      "price" : ".5" 
     }, { 
      "name" : "Soy", 
      "price" : ".5" 
     }, { 
      "name" : "Cunt", 
      "price" : 5 
     } ], 
     "name" : "Cappuccino", 
     "photo" : "https://upload.wikimedia.org/wikipedia/commons/e/ed/Wet_Cappuccino_with_heart_latte_art.jpg", 
     "price" : 10.0, 
     "size" : [ { 
      "name" : "Small", 
      "price" : 10 
     }, { 
      "name" : "Medium", 
      "price" : 18 
     } ] 
     } 

Answer 1

_renderContent = (key) => (
    <View> 
    {this.props[key] && <Text style={styles.header}>{`${key.charAt(0).toUppercase()}${key.slice(1)}`}</Text>} 
    {(this.props[key] || []).map(section, i) => (
     <AddToCartRow 
     key={i} 
     data={section} 
     productName={this.props.data.name} 
     value={Config.priceToPriceWithCurrency(section.price)} 
     /> 
    )} 
    </View> 
); 

당신은 매핑 할 props의 키를 전달해야합니다.

<ParallaxScrollView> 
    <View> 
    {['milk', 'size'].map(this._renderContent)} 
    </View> 
</ParallaxScrollView>