嘗試烘乾此反應代碼時出錯（jsx）

這是一個反應項目，下面的代碼是jsx。代碼我試圖在下面幹掉。它工作正常，但它很長！嘗試烘乾此反應代碼時出錯（jsx）

const rightIcons = (
      <div> 
       <a href="#"> 
        <FontIcon 
         className="material-icons" 
         style={iconStyles} 
         onClick={() => this.props.scrollCallback('frontend')} 
        > 
         important_devices 
        </FontIcon> 
       </a> 
       <a href="#"> 
        <FontIcon 
         className="material-icons" 
         style={iconStyles} 
         onClick={() => this.props.scrollCallback('backend')} 
        > 
         dns 
        </FontIcon> 
       </a> 
       <a href="#"> 
        <FontIcon 
         className="material-icons" 
         style={iconStyles} 
         onClick={() => this.props.scrollCallback('withCare')} 
        > 
         favorite 
        </FontIcon> 
       </a> 
     ... 
      </div> 
     );

這是我通過它循環嘗試

const iconFields = [ 
     { icon: 'important_devices', component: 'frontend' }, 
     { icon: 'dns', component: 'backend' }, 
     { icon: 'favorite', component: 'withCare' }, 
     { icon: 'code', component: 'projects' }, 
     { icon: 'face', component: 'contact' } 
    ]; 
{iconFields.map(function(icon, i) { 
        return (
         <a href="#" key={i}> 
          <FontIcon 
           className="material-icons" 
           style={iconStyles} 
           onClick={() => this.props.scrollCallback(icon.component)} 
          > 
           {icon.icon} 
          </FontIcon> 
         </a> 
        ); 
       })}

我已經試過了「icon.component」幾種不同的方式，但它總是會導致一個錯誤。「icon.icon」工作正常

來源

2017-09-02 D. Wall

在第一個代碼段要傳遞部件作爲像'this.props.scrollCallback（「後端」）字符串'和在循環代碼要傳遞部件爲對象。所以將其改爲'this.props.scrollCallback（icon.component）} –

TypeError：無法讀取undefined> –

的屬性'props'onClick = {（）=> this.props.scrollCallback（icon.component）} –

針對任何具有類似問題的人的最終代碼。感謝Prakash sharma！

const iconFields = [ 
      { icon: 'important_devices', component: 'frontend' }, 
      { icon: 'dns', component: 'backend' }, 
      { icon: 'favorite', component: 'withCare' }, 
      { icon: 'code', component: 'projects' }, 
      { icon: 'face', component: 'contact' } 
     ]; 
     const rightIcons = (
      <div> 
       {iconFields.map((icon, i) => { 
        return (
         <a href="#" key={i}> 
          <FontIcon 
           className="material-icons" 
           style={iconStyles} 
           onClick={() => this.props.scrollCallback(icon.component)} 
          > 
           {icon.icon} 
          </FontIcon> 
         </a> 
        ); 
       })}

來源

2017-09-03 04:55:58

嘗試烘乾此反應代碼時出錯（jsx）

回答

相關問題