antd时间轴的Reactjs条件属性

Question

I am looping through a set of JSON data for this ReactJS component I am creating that has a timeline.

The JSON looks like this :

"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"
}]

And the code looks like this :

<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>

But I want to add a conditional attribute to take - to modify the Timeline.Item part. But I am getting syntax errors.

<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

You cannot build the actual JSX syntax code based on a ternary operator. You need to do one of the following :

Either build each prop based on your condition as following :

<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 return completely different JSX based on the condition :

<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>