Question

我在一个单独的文件中使用材质用户界面创建了一个表格。

TradesTable.js

const DummyTableRow = (props) => {
    let myRows = props.trades.map((trade, index) => {
        return <TableRow>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[0]}</TableRowColumn>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[1]}</TableRowColumn>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[2]}</TableRowColumn>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[3]}</TableRowColumn>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[4]}</TableRowColumn>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[5]}</TableRowColumn>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[6]}</TableRowColumn>
        </TableRow>
        });
    return myRows;
}

const TradesTable = (props) => {
    return(
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHeaderColumn>Trade date</TableHeaderColumn>
                    <TableHeaderColumn>Commodity</TableHeaderColumn>
                    <TableHeaderColumn>Side</TableHeaderColumn>
                    <TableHeaderColumn>Qty</TableHeaderColumn>
                    <TableHeaderColumn>Price</TableHeaderColumn>
                    <TableHeaderColumn>CounterParty</TableHeaderColumn>
                    <TableHeaderColumn>Location</TableHeaderColumn>
                </TableRow>
            </TableHeader>
        <TableBody>
            <DummyTableRow trades={props.trades}/>
        </TableBody>
    </Table>
    );
}

module.exports = TradesTable

此表的行正在从组件的props中填充。

此表在一些其他组件中用作材料UI <AppBar>组件的一部分。

<AppBar style={{backgroundColor: 'White'}} 
                    iconElementLeft={<TradesTable trades={this.props.trade}/>} 
                    ....
                    ....

this.props.trade的值来自商店。

这里的问题是表头显示了复选框，但行没有显示复选框我已阅读文档，默认行为是复选框显示。

Wham我在这里做的是行的复选框不显示？

Answer 1

此问题与DummyTableRow：
有关

当您尝试执行操作时会发生什么：

<TableBody>
   <DummyTableRow trades={props.trades}/>
</TableBody>

它做的是

<TableBody>
   <DummyTableRow>
        <TableRow>
            <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[0]}</TableRowColumn>
            ...
        </TableRow>
        ...
   <DummyTableRow>
</TableBody>

结构不太正确，应该像

<TableBody>
    <TableRow>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[0]}</TableRowColumn>
        ...
    </TableRow>
    ...
</TableBody>

解决方案：

创建一个简单的函数，而不是

的无状态组件

const getRow = (data) => {
    let myRows = data.trades.map((trade, index) => {
        return <TableRow>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[0]}</TableRowColumn>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[1]}</TableRowColumn>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[2]}</TableRowColumn>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[3]}</TableRowColumn>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[4]}</TableRowColumn>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[5]}</TableRowColumn>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[6]}</TableRowColumn>
        </TableRow>
        });
    return myRows;
}

并像

一样使用它

<TableBody>
   { getRow(props.trades) }
</TableBody>

WORKING DEMO （有问题和解决方案）

材料ui表行复选框不显示

1 个答案: