我在一个单独的文件中使用材质用户界面创建了一个表格。
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我在这里做的是行的复选框不显示?
答案 0 :(得分:2)
此问题与
有关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 (有问题和解决方案)