{
this.state.list_expand ? (
<div style={{marginTop: 10, marginBottom: 10}}>
<List className="my-list">
{
platforms.map((p, index) => (
<div key={p.key}>
{
this.state.choose_card === index ? null : (
<List.Item
key={p.key}
thumb={p.thumb}
multipleLine
onClick={() => this.chooseCard(index)}
>
{p.text} <Brief>{p.brief}</Brief>
</List.Item>
)
}
</div>
))
}
</List>
</div>
) : null
}
首先我们先用三目运算符来控制仅在list_expand==true才会显示,然后我通过map方法传入p和index,相当于把 p作为currentValue,并传入index。
这样我们就能把platforms数组中的每一项都显示出来,并能直接用p.thumb调platforms数组中的thumb属性。