javascript - Material ui 表行复选框不显示

Question

我在单独的文件中为我的 React 应用使用 Material UI 创建了一个表格。

交易表.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 填充的。

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

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

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

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

Wham 我在这里做什么，行的复选框没有显示？

Answer 1

Here issue is with 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>

Solution for this :

创建一个简单的函数而不是无状态组件

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 (同时有问题和解决方案)