React中函数式子组件嵌入Table行时未被调用无法渲染的问题

你的自定义组件从来没有被React尝试执行渲染。
这个问题和空数组、key设置错误、组件导入路径错误都没有关系，根本原因是你用的Table组件内部做了严格的子节点白名单校验：

• 不少封装度比较高的表格组件，渲染children时会逐一遍历直接子元素，校验每个元素的type是不是组件内置认可的合法类型（比如TableHeaderCell、TableRow），只有匹配白名单的子元素才会被保留渲染。
• 你之前直接在children里内联写TableRow的时候，Table拿到的直接子元素类型完全在白名单里，所以渲染一切正常。
• 换成<ActivityRowComponent />之后，Table拿到的直接子元素类型变成了你自定义的函数组件，完全不在白名单范围内，会直接把这些子元素过滤扔掉——这也是为什么你组件里的console.log从来不会打出来：React根本就没走到渲染这个组件的步骤，元素在Table组件内部就被拦截了。

• 方案1：把原本的组件逻辑抽成普通复用函数，不要单独封装成React组件
  把行的JSX结构封装成一个返回JSX的普通函数，在map遍历的时候直接调用，保证Table拿到的直接子元素还是原生的TableRow类型，顺利通过白名单校验。示例：

  // 普通JSX生成函数，不是React组件
  const renderActivityRow = (item) => {
    return (
      <TableRow key={item.activity_id}>
        <TableCell>{item.name}</TableCell>
        <TableCell>{item.activity_type.description}</TableCell>
        <TableCell>{item.startDate}</TableCell>
      </TableRow>
    )
  }
  
  // 父组件里直接调用这个函数即可
  <Table title="Actions">
    <TableHeaderCell>Name</TableHeaderCell>
    <TableHeaderCell>Description</TableHeaderCell>
    <TableHeaderCell>Start Date</TableHeaderCell>
    {data.data.map(item => renderActivityRow(item))}
  </Table>
  

• 方案2：用Table组件本身提供的自定义行渲染能力
  查阅你使用的Table组件的文档，找到它内置的自定义行渲染入口（一般会以rowRenderer、components配置这类props暴露），在官方预留的渲染入口里传入你的ActivityRowComponent，就能绕开直接子节点的白名单校验。
• 补充排查点：可以顺便检查下ActivityRowComponent的导入路径是不是写对了，但从你描述的“组件完全没被调用、console无输出”的现象来看，导入错误不是核心诱因。

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