Question

我目前有一个表格，显示了几行，我使用数组映射定义了不同的列。但是，我希望最后一列或每一行都有一个按钮，但是现在当我尝试记录文本时，它甚至都不显示。为什么是这样？我尝试记录的文字是我的代码所说的 <TableRowColumn> INSERT BUTTON HERE </TableRowColumn>

const row = (currentValue, index, header) => (
  <TableRow key={`t-${index}`}>
{
  header.map((headerName, index) => {
    return (
      <TableRowColumn key={`trc-${index}`}>
        {currentValue[headerName.prop]}
      </TableRowColumn>
      <TableRowColumn>
        INSERT BUTTON HERE
    </TableRowColumn>
  )
  })
}
  </TableRow>
);


export default ({ data, header }) =>
<Table>
<TableHeader>
  <TableRow>
    {
      header.map((headerName, index) =>  // single line arrow implied return
        <TableHeaderColumn key={`thc-${index}`}>
          {headerName.name}
        </TableHeaderColumn>
      )
    }
  </TableRow>
</TableHeader>
<TableBody>
  {data.map((currentValue, index) => row(currentValue, index, header))}
</TableBody>
</Table>

Answer 1

在map内的row函数中，您试图返回未包含在单个父元素中的多个元素（两个<TableRowColumn> s）。正如here所讨论的那样，这不是一个有效的结构。

相反，您可以尝试返回一列列：

header.map((headerName, index) => {
  return ([
    <TableRowColumn key={`trc-${index}`}>
      {currentValue[headerName.prop]}
    </TableRowColumn>,
    <TableRowColumn>
      INSERT BUTTON HERE
    </TableRowColumn>
  ]);
});

或者，您可以重写逻辑，以便每个return语句只需要返回一个元素。

在React中呈现表列数据

1 个答案: