不知道你是用什么來渲染數(shù)據(jù)的，你可以先處理數(shù)據(jù)，將A和B兩個(gè)數(shù)據(jù)整理成一個(gè)新的數(shù)據(jù)源，再進(jìn)行渲染。
你應(yīng)該用的是iView，樣式問題你用瀏覽器調(diào)試下吧，看結(jié)構(gòu)代碼看不出來什么問題。

如下：dataSource={data}, data是A與B合在一起的數(shù)據(jù)源,item={A1, B1},
但是顯示有點(diǎn)問題，能提提供點(diǎn)建議嗎:　
去除＜div>的塊狀顯示即可

<div style={{ padding: 5 }}>
    <Row gutter={10}>
        <Col span={20}>    
              <List
                 rowKey="id"
                 loading={loading}
                 grid={{ gutter: 10, column: 4}}
                 dataSource={data}
                 renderItem={item =>
                (
                    <div>
                        <List.Item>
                              <Card hoverable style={{ fontSize: 14, }} type={ 'inner' } title={"合約"}>
                                  <font style={{fontSize:"20", color:"#000", paddingLeft: 25}}>{[item[0].symbol,"(", item[0].cn_name,")"]}</font><br/>
                                  <font style={{fontSize:"20", color:"#000", paddingLeft: 25}}>{item[0].expiry}</font>
                            </Card>
                        </List.Item>,
                           <List.Item>
                            <Card hoverable style={{ fontSize: 14}} type={ 'inner' } title={"合約候選"} extra={<Switch defaultChecked onChange={this.onChange(item.symbol)}/>}>
                                  <font style={{fontSize:"20", color:"#000", paddingLeft: 25}}>{[item[1].symbol,"(", item[1].cn_name,")"]}</font><br/>
                                  <font style={{fontSize:"20", color:"#000", paddingLeft: 25}}>{item[1].expiry}</font>
                            </Card>
                        </List.Item>
                    </div>
                )
                }
            />
        </Col>
        
    </Row>        
</div>

頁面顯示如下：