antd 踩坑—不定期更新

Statistic

• 水平居中，style = {{ textAlign: 'center' }}
• 垂直居中，考虑 style = {{ padding: '30% 0' }} ，凭感觉调整

技巧

遍历生成多个组件

<Row gutter={24}>
    {managementBanner.map(mb => (
        <Col key={mb.title} span={6}>
            <Statistic
                style={{
                    backgroundColor: '#F0F2F5',
                    width: '115px',
                    height: '125px',
                    textAlign: 'center',
                    padding: '30% 0'
                }}
                title={mb.title}
                value={mb.value}
                valueStyle={{ color: mb.color }}
            />
        </Col>
    ))}
</Row>;

Radio

Radio.Button 重复点击取消状态

// 模拟重复点击取消选中状态
    function radioCancleChoose() {
        quickForm.resetFields();
        setQuickBtn(-1);
    }
    
    <Form className="" form={quickForm}>
                <Row>
                    <Form.Item label="快捷筛选" name="timeoutStatus">
                        <Radio.Group
                            buttonStyle="solid"
                            value={quickBtn}
                            onChange={handleRadioGroupChange}>
                            <Radio.Button value="1" onClick={radioCancleChoose}>
                                即将回复超时&nbsp;
                                <span style={{ color: '#FFBF00' }}>{warnCnt}</span>
                            </Radio.Button>
                            <Radio.Button value="2" onClick={radioCancleChoose}>
                                回复已超时&nbsp;
                                <span style={{ color: '#E7422B' }}>{errCnt}</span>
                            </Radio.Button>
                        </Radio.Group>
                    </Form.Item>
                </Row>
            </Form>