鍍金池/ 問答/HTML/ antd3.0 table新增的components屬性如何使用

antd3.0 table新增的components屬性如何使用

antd3.0 table新增了components屬性,用于覆蓋默認(rèn)table元素,官方更新日志上只提供了簡答的配置,沒有詳細(xì)的元素使用方式,自己寫了個(gè)如下,單沒有起作用

import React from 'react';
import { Table } from 'antd';

export class TestTable extends React.Component {

    constructor() {
        super();

        this.state = {
            components: {
                table: MyTable,
                header: {
                    wrapper: HeaderWrapper,
                    row: HeaderRow,
                    cell: HeaderCell,
                },
                body: {
                    wrapper: BodyWrapper,
                    row: BodyRow,
                    cell: BodyCell,
                },
            },
            dataSource:[{
                key: '1',
                name: '胡彥斌',
                age: 32,
                address: '西湖區(qū)湖底公園1號(hào)'
            }, {
                key: '2',
                name: '胡彥祖',
                age: 42,
                address: '西湖區(qū)湖底公園1號(hào)'
            }],
            columns: [{
                title: '姓名',
                dataIndex: 'name',
                key: 'name',
            }, {
                title: '年齡',
                dataIndex: 'age',
                key: 'age',
            }, {
                title: '住址',
                dataIndex: 'address',
                key: 'address',
            }]
        }
    }

    componentWillMount() {

    }

    componentWillUnmount() {

    }

    render() {
        const { components, columns, dataSource } = this.state;
        return (
            <Table components={components} columns={columns} dataSource={dataSource}/>
        );
    }
}

const MyTable = () => <div></div>;
const HeaderWrapper = () => <div></div>;
const HeaderRow = () => <div></div>;
const HeaderCell = () => <div></div>;
const BodyWrapper = () => <div></div>;
const BodyRow = () => <div></div>;
const BodyCell = () => <div></div>;
回答
編輯回答
囍槑

剛剛看了rc-table上的關(guān)于components的使用方法,https://github.com/react-comp... 修改了我的自定義的components實(shí)現(xiàn),可以用了

const MyTable = (props) => <table {...props}></table>;
const HeaderWrapper = (props) => <thead {...props}></thead>;
const HeaderRow = (props) => <tr {...props}></tr>;
const HeaderCell = (props) => <th {...props}></th>;
const BodyWrapper = (props) => <tbody {...props}></tbody>;
const BodyRow = (props) => <tr {...props}></tr>;
const BodyCell = (props) => <td {...props}></td>;

自定義組件上需要傳入props,最開始我全部元素用的是div,沒有樣式,全部錯(cuò)亂的,換成對應(yīng)table相應(yīng)的元素,基本表格沒問題了,其他的還沒測試,有這個(gè)接口開來我們可以對table為所欲為了

2018年2月27日 04:59
編輯回答
吢涼

剛看了Table的源碼,antd在上層預(yù)留了這個(gè)接口,判斷邏輯也寫好了,可惜在底層組件里我沒找相關(guān)的支持。

我的結(jié)論是目前這個(gè)功能是不可用的。如有我遺漏的地方還請antd團(tuán)隊(duì)成員指出。

一會(huì)補(bǔ)充一個(gè)簡短的源碼分析

=========簡要分析============

查看Table組件的代碼,發(fā)現(xiàn)在初始化的時(shí)候會(huì)調(diào)用createComponents方法

clipboard.png

clipboard.png

可以看到,這個(gè)方法最終在this.components上設(shè)置了一個(gè)components對象。圖中if的兩個(gè)布爾值,!this.components對應(yīng)組件掛載,bodyRow !== preBodyRow對應(yīng)的是componentWillReceiveProps的情況,因?yàn)橛锌赡芨淖儌魅氲?code>components。

this.components會(huì)在render方法中使用

clipboard.png

RcTableTable的底層組件,antd大部分組件都是這個(gè)形式,基本功能都是由底層組件實(shí)現(xiàn)的。

找到RcTable的源碼,發(fā)現(xiàn)componentsgetChildContext中被調(diào)用了

clipboard.png

然而getChildContext并沒有在任何地方被調(diào)用。看起來路走到頭了,然而還有一種可能,components通過剩余參數(shù)傳進(jìn)子組件了。于是我們找到了相關(guān)代碼

clipboard.png

根據(jù)代碼,我們找到ExpandableTable組件

clipboard.png

注意紅圈處,這表明最終傳進(jìn)TableRow的是一個(gè)預(yù)設(shè)對象,與我們傳入的components沒有任何關(guān)系。這也就是我說的沒有底層組件的支持。前面經(jīng)過一系列傳遞的components,就在這里斷掉了。因此我認(rèn)為這個(gè)屬性是沒作用的

另外,關(guān)于components的寫法,因?yàn)?code>antd用ts寫的,所以可以找到component的接口定義

clipboard.png

再結(jié)合最后一步的預(yù)設(shè)components

clipboard.png

以及最重要的,TableRow中的代碼:

clipboard.png

clipboard.png

可以看出,傳進(jìn)去的trtd最終是被當(dāng)成組件使用的,這也是供用戶自定義的地方

2018年1月2日 21:10