使用antd的Row、Col組件繪製word申請表

背景

想到用Row,Col繪製word申請表，首先他的span屬性調節可能更方便一些，而且整體使用起來也是React風格，避免了使用tr, td這種原生的標籤帶來一系列屬性錯誤以及不兼容。
當然了我使用tr,td完成了一版，踩了一些坑，如果你想用這種方式，希望這篇文章可以幫到你。

開始coding

說一句，嫌囉嗦直接拉到最後，拷貝一下就能用。
當我一開始使用的時候JS文件代碼是這樣的。

<div className='trrdd'>
    <Row>
        <Col span={4}>XXXXX</Col>
        <Col span={4}>XXXXX</Col>
        <Col span={4}>XXXXX</Col>
        <Col span={4}>XXXXX</Col>
    </Row>
    <Row>
        <Col span={4}>XXXXX</Col>
        <Col span={4}>XXXXX</Col>
        <Col span={4}>XXXXX</Col>
        <Col span={4}>XXXXX</Col>
    </Row>
</div>

css是這樣的

.trrdd .ant-col-4 {
    border: 1px solid #000;
}

當然了我感覺第一步可能一般人都會這樣寫吧，那我們看到的效果如圖：

我們知道tr,td是專門用來生成table的，只要設置一個屬性border-collapse:collapse就可以避免邊框重疊。但是Row, Col可以當div用的，所以就出現了邊框重疊現象。
解決方案呢，想一想如果把每個框框微調一下位置，讓相鄰的兩條邊框相互覆蓋，而不是緊挨着形成一條2px的邊框。margin屬性可以接收四個值，順序分別爲上、右、下、左。

好了，再說一個關鍵的地方，不知道大家會不會有的時候發現自己寫margin-right/margin-bottom屬性不起作用，由於瀏覽器元素的排列是從左向右，所以如果你給左邊的一個元素設置一個margin-right:-1px,這個時候考慮顯示效果爲像左移動1px，但是在標準流中顯示效果並沒有發生變化，但是如果打開控制檯，如果右邊有其他元素，其他元素是會向左移動的，因爲這個設置了margin-right的元素佔據的位置已經向左移動了1px，只是顯示效果還是和沒移動之前一樣，margin-bottom也同理。

這個時候結果也很明顯了，既然設置margin-right:-1,左邊的元素相對於右邊緊挨着的元素顯示效果位置不會動，而且每2個柵格都會產生一次這種效應，通過這種方式可以實現一些很巧妙的操作。

結論

.trrdd .ant-col-4 {
    border: 1px solid #000;
    margin: 0px -1px -1px 0px;
}

最後的展示效果如圖：

多說一句

這樣的css樣式，是可以影響到antd的默認樣式的，可能因爲這些代碼文件寫到了.less文件中吧。更多的修改antd默認樣式的知識可以參考：antd修改默認樣式