React可复用Table组件renderCell返回JSX数组无法渲染问题

问题1：renderBody无法渲染renderCell返回的JSX数组 #

问题原因 #

你在rows.map的回调函数中使用了带大括号的箭头函数，但没有显式返回<TableRow>元素。箭头函数如果用{}包裹逻辑块必须手动写return，否则默认返回undefined，相当于你给<TableBody>里塞入了一堆undefined，自然渲染不出内容。

修复方案 #

两种改法任选其一：

1. 把箭头函数的大括号换成小括号，使用隐式返回
2. 保留大括号，在内部显式写return语句
   修正后的renderBody代码示例：

renderBody = () => {
  const rows = this.props.rows
  return (
    <TableBody>
      {/* 用小括号实现隐式返回 */}
      {rows.map(row => (
        <TableRow key={row.key}>
          {this.renderCell(row)}
        </TableRow>
      ))}
    </TableBody>
  )
}

显式返回写法：

renderBody = () => {
  const rows = this.props.rows
  return (
    <TableBody>
      {rows.map(row => {
        // 显式返回TableRow元素
        return <TableRow key={row.key}>
          {this.renderCell(row)}
        </TableRow>
      })}
    </TableBody>
  )
}

问题2：map内部嵌套for循环编译失败 #

问题原因 #

JSX中{}包裹的内容只能是有返回值的JavaScript表达式，而for循环是流程控制语句，没有返回值，不能直接放在JSX的{}中，因此会触发编译报错。

修复方案 #

如果不想单独封装renderCell函数，可以选择两种实现方式：

1. 用Object.values()把行对象转成值数组，再嵌套map生成单元格（推荐写法）：

renderBody = () => {
  return (
    <TableBody>
      {this.props.rows.map(row => (
        <TableRow key={row.key}>
          {Object.values(row).map((value, index) => (
            <TableCell key={index} align="right">{value}</TableCell>
          ))}
        </TableRow>
      ))}
    </TableBody>
  )
}

2. 保留for in逻辑的话，先在JSX外部构建好单元格数组再插入：

renderBody = () => {
  return (
    <TableBody>
      {this.props.rows.map(row => {
        // 在JSX外部提前处理单元格数组
        const cells = []
        let i = 1
        for (const prop in row) {
          if (row.hasOwnProperty(prop)) {
            cells.push(<TableCell key={i} align="right">{row[prop]}</TableCell>)
            i++
          }
        }
        // 返回行元素，插入已生成的单元格数组
        return <TableRow key={row.key}>{cells}</TableRow>
      })}
    </TableBody>
  )
}

内容的提问来源于stack exchange，提问作者Maqsud