javascript - 在 React 中,我如何知道哪个父组件渲染了子组件?
问题描述
我正在制作一个表格组件,我想在两页中使用它,但我希望一页显示两列,另一页不显示。我想在组件内部创建一个门来检查父组件是什么,并根据它更改它的渲染。这可能吗?
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>
)
解决方案
您可以创建功能组件表,它将根据传递的数据动态创建列和行。但是在传递数据之前,您应该以适当的格式在父组件中准备它。
这是我的一个组件的简单示例(基于 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 个对象,数据填充表
推荐阅读
- python - 如何使用输出成功调用变色功能?
- flutter - 如何修复“引发另一个异常:NoSuchMethodError:getter 'value' was called on null”错误
- asp.net-core - 如何使用 asp-for 获取模型的完整命名空间路径
- excel - 什么是“禁用宏”错误弹出窗口?我可以用它代替 msgbox 吗?
- c# - 在 Microsft Graph 中调用并显示 List memberOf 的结果
- c++ - 为什么当我使用双精度时,Qt<->Matlab 正确写入和读取我的字节,但对于存储 uint32 的字节却不正确?
- c# - 如何从 HttpClient 实例获取会话 ID?
- spring-boot - 创建测试数据时出现 NullPointerException
- react-native - 如何从屏幕组件访问 createStackNavigator 中定义的默认路由参数
- video-streaming - 有没有办法识别流视频的编解码器?