antdタイムラインのReactjs条件付き属性

Question

タイムラインを持つこのReactJSコンポーネントのJSONデータをループしています。

JSONは次のようになります。

"chart": [{ 
    "label": "Registered", 
    "date": "2017-07-03" 
}, { 
    "label": "1", 
    "date": "2017-07-04" 
}, { 
    "label": "2", 
    "date": "2017-08-01" 
}, { 
    "label": "3", 
    "date": "2017-09-01" 
}] 

、コードは次のようになります。

<Timeline> 
    { 
     this.props.data.contents.chart.map(function(e, index) { 
      return (
       <Timeline.Item key={index}> 
        {e.label} 
        <span>{moment(e.date).format("DD MMM YYYY")}</span> 
       </Timeline.Item> 
      ); 
     }) 
    }    
</Timeline> 

しかし、私は取るに条件属性を追加する - Timeline.Item部分を変更します。しかし、私は構文エラーを取得しています。

<Timeline> 
    { 
     this.props.data.contents.chart.map(function(e, index) { 
      return (
       <Timeline.Item key={index} (e.label === "Registered" ? "dot={<Icon type="idcard" style={{ fontSize: '12px' }} />} color="red"" : null)> 
        {e.label} 
        <span>{moment(e.date).format("DD MMM YYYY")}</span> 
       </Timeline.Item> 
      ); 
     }) 
    }    
</Timeline> 

Answer 1

実際のJSX構文コードは、3項演算子に基づいて作成することはできません。あなたは、次のいずれかを実行する必要があります。

<Timeline> 
    { 
     this.props.data.contents.chart.map(function(e, index) { 
      return (
       <Timeline.Item key={ index } 
           dot={ (e.label === 'Registered' ? <Icon type="idcard" style={{ fontSize: '12px' }} /> : null) } 
           color={ (e.label === 'Registered' ? 'red' : '') }> 
        {e.label} 
        <span>{moment(e.date).format("DD MMM YYYY")}</span> 
       </Timeline.Item> 
      ); 
     }) 
    }    
</Timeline> 

OR条件に基づいて、完全に異なるJSXを返すを：：

<Timeline> 
{ 
    this.props.data.contents.chart.map(function(e, index) { 
     if (e.label === 'Registered') { 
      return (
       <Timeline.Item key={ index } 
           dot={ <Icon type="idcard" style={{ fontSize: '12px' }} /> } 
           color="red"> 
        {e.label} 
        <span>{moment(e.date).format("DD MMM YYYY")}</span> 
       </Timeline.Item> 
      ); 
     } 
     return (
      <Timeline.Item key={ index }> 
       {e.label} 
       <span>{moment(e.date).format("DD MMM YYYY")}</span> 
      </Timeline.Item> 
     ); 
    }) 
}    
</Timeline>