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

Question

I'm making a table component that I want to be used across two pages, but I want one page to show two columns and the other page to not. I'd like to make a gate inside the component that checks what the parent component is and changes it's render based on that. Is this possible?

EX: of what I'd like the table to look like

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>
  )

Answer 1

you can create functional component Table which will create columns and rows dynamicaly according to passed data. But before passing data you should prepare it in parent component in a proper format.

here is simple example of one of my componente(based on 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>

This table I needed in different pages. So I divided it and pass separate column names and data. You can do similar thing - use such component in any page and pass from parent 2 data objects: 1 object\array with column names 2 object with data to fill table