代码之家 › 专栏 › 技术社区 › The Old County

antd时间线的Reactjs条件属性

reactjs json

The Old County · 技术社区 · 7 年前

我正在为我创建的这个ReactJS组件循环一组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>

1 回复 | 直到 7 年前

Ghassen Louhaichi 7 年前

您无法基于三元运算符构建实际的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>

推荐文章

lonix · 使用sed从JSON中提取非贪婪正则表达式

1 年前

Ishaan Adarsh · 未知的META规范,无法验证。[规范v1.0.1]

1 年前

Henry · 使用Python将json重新格式化为键值对

2 年前

eymentakak · json字典类型错误:字符串索引必须是整数

2 年前

igbins09 · 在shell bash脚本中使用jq将单行JSON转换为csv

2 年前

Gnome-Improvement713 · POST正文未使用JSON通过cURL发送

2 年前

Julien T-Pro · 如何在python中删除数组对象中的空列表?

2 年前

Vodka · 如何将单个json对象转换为json数组?

2 年前

Alper · 从json转换为数据帧?

2 年前

user19251203 · ReactJs:Uncaught TypeError:无法读取未定义的属性(读取“0”)

2 年前