在 React 中，我如何知道哪个父组件渲染了子组件？答案

【问题标题】：In React, how do I know which parent component rendered a child component?在 React 中，我如何知道哪个父组件渲染了子组件？
【发布时间】：2021-08-26 20:49:47
【问题描述】：

我正在制作一个表格组件，我想在两页中使用它，但我希望一页显示两列，而另一页不显示。我想在组件内部创建一个门来检查父组件是什么，并根据它更改它的渲染。这可能吗？

EX：我希望桌子是什么样子的

const EventTable = ({ events }) => (
    <Box>
      <TableBody>
          {events.map(
            ({
              amount,
              created,
              disappearingColumnA,
              id,
            }) => (
              <TableRow key={id}>
                <TableCell padding="small" className="created-cell">
                  <Small>{formatDateStandard(created)}</Small>
                </TableCell>
                <TableCell padding="small" className="amount-cell">
                  <Small>{centsToDollarsWithSign(amount)}</Small>
                </TableCell>

                {/* Relevant Code */}
                {!isChildOfPageA && (
                  <TableCell padding="small" className="disappearingColumnA-cell">
                    <Small>{centsToDollarsWithSign(disappearingColumnA)}</Small>
                  </TableCell>
                )}
              </TableRow>
            ),
          )}
        </TableBody>
    </Box>
  )

【问题讨论】：

我只是将一个道具传递给表格组件，指示是否显示该列。然后使用该道具而不是isChildOfPageA。

标签： javascript reactjs components

【解决方案1】：

您可以创建功能组件表，它将根据传递的数据动态创建列和行。但在传递数据之前，您应该在父组件中以适当的格式准备数据。

这是我的一个组件的简单示例（基于 Semantic-ui React）：

return (
        <Table celled>
            <Table.Header>
                <Table.Row>
                    {
                        columnNames.map(columnName => {
                            return <Table.HeaderCell key={columnName}>
                                {columnName}
                            </Table.HeaderCell>
                        })
                    }
                </Table.Row>
            </Table.Header>

            <Table.Body>
                {
                    tableData.map((item) => {
                        return <Table.Row key={item.userId}>
                            <Table.Cell width={2}>{item.firstName}</Table.Cell>
                            <Table.Cell width={2}>{item.lastName}</Table.Cell>
                            <Table.Cell width={3}>{item.email}</Table.Cell>
                            <Table.Cell width={3}>{item.telephone}</Table.Cell>
                            

                            <Table.Cell>
                                <Button>
                                    Info
                                </Button>
                                
                                <Button>
                                    Delete
                                </Button>
                            </Table.Cell>
                        </Table.Row>
                    })
                }
            </Table.Body>
        </Table>

这个表我需要在不同的页面。所以我划分它并传递单独的列名和数据。您可以做类似的事情 - 在任何页面中使用此类组件并从父级 2 个数据对象传递：1 个对象\数组，列名 2 个对象，数据填充表

【讨论】：