代码之家  ›  专栏  ›  技术社区  ›  Engineer

如何在React虚拟化库表列中添加图像

  •  0
  • Engineer  · 技术社区  · 7 年前

    如何在React虚拟化库表的列中插入图像, 我尝试添加列的Datakey属性,但它没有加载,解决方案是什么

    import React, { Component } from 'react';
    import { Column, Table, AutoSizer, Grid } from 'react-virtualized';
    
    class TableComponent extends Component{
    	state={
    		callLogsColumnsData: null
    	}
    	componentDidMount(){
    		this.setState({callLogsColumnsData: this.props.tableData});
    	}
    	render(){
    		return(
    			<Table
    				sortBy="rank"
    				sortDirection="DESC"
    				width={width}
    				height={820}
    				headerHeight={20}
    				rowHeight={60}
    				headerClassName='call-logs-table-header'
    				rowClassName='call-logs-row-table'
    				style={{borderBottom: "solid 1px #000"}}
    				onRowClick={this.onRowClick}
    				rowCount={this.state.callLogsColumnsData.length}
    				rowGetter={({ index }) => this.state.callLogsColumnsData[index]}
    			>
    				<Column
    					label='CALL ID'
    					dataKey='callId'
    					width={100}
    					className="table-column"
    				/>
    			</Table>
    		)
    	}
    }
    export default TableComponent;
    1 回复  |  直到 7 年前
        1
  •  0
  •   Engineer    7 年前

    < Column
    width = {
      130
    }
    label = 'CLI LOCATION'
    dataKey = 'cliLocation'
    cellData = ''
    cellRenderer = {
      this.cliLocationColumnData
    }
    />
    
    cliLocationColumnData = ({
      cellData,
      dataKey
    }) => {
      return ( <
        div >
        <
        img src = {
          GB_FLAG
        }
        alt = 'imageName' / >
        <
        span > {
          dataKey
        } < /span> <
        /div>
      )
    }