json - 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 语法代码。您需要执行以下操作之一:

根据您的情况构建每个 Prop ，如下所示:

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

或者根据条件返回完全不同的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>