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

根据您的条件构建每个道具如下：

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

Reactjs antd时间轴的条件属性

1 个答案: