![](/img/trans.png)
[英]How do i get the state value which I have stored in the Child component to the Parent component in React without button OnClick events?
[英]In React, how do I know which parent component rendered a child component?
我正在制作一個表格組件,我想在兩頁中使用它,但我希望一頁顯示兩列,另一頁不顯示。 我想在組件內部創建一個門來檢查父組件是什么,並根據它更改它的渲染。 這可能嗎?
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 object,數據填充表
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.