React - 渲染功能子组件

Question

当作为子组件包含在父组件中时，我在渲染 React 功能组件时遇到问题。

以下呈现完美：

<Table title="Actions">
    <TableHeaderCell>Name</TableHeaderCell>
    <TableHeaderCell>Description</TableHeaderCell>
    <TableHeaderCell>Start Date</TableHeaderCell>
    {data.data.map(item => (
       <TableRow>
          <TableCell>
            {item.name}
          </TableCell>
          <TableCell>
             {item.activity_type.description}
          </TableCell>
          <TableCell>
             {item.startDate}
          </TableCell>

      </TableRow>))}
    </Table>

但是，当用功能组件替换 TableRow 时，永远不会显示 TableRow。我创建了以下子组件：

export const ActivityRowComponent = props => {
console.log('entered ActivityRowComponent');
const item = props.activityItem;

return (
    <TableRow>
        <TableCell>
            {item.name}
        </TableCell>
        <TableCell>
            {item.activity_type.description}
        </TableCell>
        <TableCell>
            {item.startDate}
        </TableCell>

    </TableRow>
);
};


ActivityRowComponent.propTypes = {
   activityItem: PropTypes.object.isRequired,

};

并将上面的代码改为：

<Table title="Actions">
    <TableHeaderCell>Name</TableHeaderCell>
    <TableHeaderCell>Description</TableHeaderCell>
    <TableHeaderCell>Start Date</TableHeaderCell>
    {data.data.map(item => (
       <ActivityRowComponent key={item.activity_id} activityItem={item} />
    ))}
</Table>

请注意，“ActivityRowComponent”中的“console.log”永远不会到达。此外，如果我设置了一个断点，我可以观察到“ActivityRowComponent”从未被调用。并且，请注意数组 data.data 的长度为 1。

任何想法我做错了什么？要渲染 ActivityRowComponent 该怎么做？

Answer 1

我已经使用 HTML 表格在 CodeSandbox 重现了您的场景。

并且您的组件渲染正常。不过稍微改了一下。

请检查。