React只读列表

 业务中会出现只读状态的表格，表格可以只有单纯的数字展示，也可以支持 JSX 元素的装入。和其他类型表格不一样，这种表格主要用于信息展示，没有什么业务上的交互。分为两个部分，一部分是 TSX 文件的业务逻辑，一个是 less 的描述。

ReadOnlyTable.tsx 文件

import * as React from 'react;
import {Memo,useState,useEffect} from 'react';
import './readOnlyTable.less';

interface ReadOnlyTableItems{
    key:string;
    value :string | number | JSX.Element;
    itemClassName ?:string;
}
interface ReadOnlyTableProps{data:ReadOnlyTableItems[][];
    className?:string;
    textFontSize?:number;
    defaultProps?:any;
    keyMaxNumber ?: number; // max number of title words
}

const textPadding = 0.4; // init text padding

const ReadOnlyTable:React.FC<ReadOnlyTableProps> = (props:ReadOnlyTableProps) :JSX.Element | null =>{const [titleWidth,setTitleWidth] = useState(textPadding);
    useEffect(()=>{
        const textFontSize = props.textFontSize ? props.textFontSize : 0.16;
        setTitleWidth(getKeyMaxNumber(props.data) * textFontSize+textPadding);
    },[]);
    useEffect(()=>{setTitleWidth(getKeyMaxNumber(props.data)*0.16+textPadding);
    },[props.data]);
    
    const {data,className}= props;
    const getKeyMaxNumber(item:any[],maxNumber:number = 0):number =>{if(props.keyMaxNumber) {return props.keyMaxNumber;}
        let max = maxNumber;
        item.forEach(item=>{if(item.constructor === Array){max = getKeyMaxNumber(item,max);
            }else if(String(item.key.length > max){max = String(item.key).length;
            }
        });
        return max;
    }
    
    if(!Array.isArray(props.data) || props.data.length === 0 )  {return null;}
    
    return (<div classNmae = {`read-only-table-container ${className ? className : ""}`}>
            {data.map((v:ReadOnlyTableItems,i:number)=>
                <div className = 'read-only-table-row' key = {i}>
                  {v.map((val:ReadOnlyTableItems,index:number)=>
                  <div className = {`read-only-table-items ${val.itemClassName ? val.itemClassName :"defaultClassName"}`} key = {index}>
                    <div className = 'read-only-table-key' style = {{width:`${titleWidth} rem`}}>{val.key}</div>
                    <div className = 'read-only-table-value' title = {typeof val.value === 'string' ? val.value :''}>{val.value ? val.value :''}</div>
                   </div>
                   )}
                 </div>
            )}
    )
}

ReadOnlyTable.defaultProps = {textFontSize = 0.16;}

export default Memo(ReadOnlyTable);

less 文件描述

.read-only-table-container {
    background:#fff;
    width:100%;
    font-size:.16rem;
    border-right:.01rem solid #e1e3ec;
    .read-only-table-row{
        display:flex;
        background-clip:padding-box;
        &:last-of-type{
            .read-only-table-key{border-bottom:.01rem solid #e1e3ec;}
             .read-only-table-value{border-bottom:.01rem solid #e1e3ec;}
        }
        .read-only-table-items{
            display:flex;
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
            &.defaultClassName{flex:1;}
            .read-only-table-key{
                line-height:.5rem;
                text-align:right;
                border-right:.01rem solid #e1e3ec;
                padding:.2rem;
                width:1.5rem;
                color:#666666;
                background:#fafafc;
                background-clip:padding-box;
                border-top:.01rem solid #e1e3ec;
                border-left:.01rem solid #e1e3ec;
            }
            .read-only-table-value{
                line-height:.5rem;
                flex:1;
                padding: 0 0.2rem;
                white-space:nowrap;
                color:#333333;
                overflow:hidden;
                text-overflow:ellipsis;
                border-top:.01rem solid #e1e3ec;
            }
        }
    }
}

出入数据格式如下：

    const data =[[{key:'一行一列',value:data}],
        [{key:'一行两列',value:data},{key:'一行两列',value:data}],
        [{key:'一行一列',value:data，itemClassName:'custom-style',style:{height:'1.5rem'}}],
        [{key:'jsx element',value:{JSX.Element}}]
    ]