组件未在函数内呈现 if 块 - React JS
[英]Component is not rendering the if block inside the function - React JS
问题描述
我正在处理需要将数据传递到表的任务。 该表有自己的数据类型和道具。 当我应用逻辑时，我需要遵循同样的原则。 现在我正在尝试动态传递数据。 对于表的标题，值按预期填充。 但是当我试图将数据传递给表体时，我没有得到任何值。 任何人都可以指导如何实现这一目标。 使用表格组件时，我需要遵循表格道具格式。 我已经写下了表格道具、代码和示例数据。 当我看到控制台时，我收到一条错误消息，指出检查表组件的渲染方法。
我的代码
const Table = ({mockData}) => {
function getHeadings(mockData) {
return mockData[0].cells.map(heading => {
return <HeaderCell key={heading.key}>{heading.headername}</HeaderCell> // this part is working fine
})
}
function getRow(cells) {
return cells.map(cell => {
const {headername} = cell;
if(Array.isArray(cell[headername])){
return (
<Cell key={cell.toString()}>
{
cell[headername].map(element => {
console.log("ELEMENT", element)----> This value is not coming(this if block is not working)
return <Badge intent={element} text="Primary" />
})
}
</Cell>
)
}
return <Cell>{cell[headername]}</Cell>
})
}
function getRows(mockData) {
// console.log("GETROWS ROW", mockData)
return mockData.map(row => {
// console.log("GETROWS ROW", row.cells)
return <Row key={row}>{getRow(row.cells)}</Row>
})
return (
<>
<Table paddingStyle="compact">
<Header>
{getHeadings(mockData)}
</Header>
<Body>
{getRows(mockData)}
</Body>
</Table>
JSON数据
[
{
"key": "row-0",
"cells": [
{ "key": "cell-0", "headername":"Name", "CName": "Patient One" },
{ "key": "cell-1", "headername":"Reg ID","CID": "C- 001" },
{ "key": "cell-2", "headername":"Label","CLabel": ["In", "Out"] }
]
}
]
餐桌道具：
1. Table PROPS- Prop: Children Type: Node default:[] (Desc: the child
content for table consisting of eithera Table Header or Body)
2. Table Header Props- Prop: Children Type: node default:[]
3. Table Header Cell props - prop:children type:node default:[](Desc:
content to display for column header)
4. Table Row Props - Prop: Children Type: node default:[] (Desc: child
table cells to be placed within the tr)
5. Table Cell Props - Prop: Children Type: node default:[] (Desc:
content to be displayed for row cell)
1 个解决方案
解决方案1
0 2022-07-12 04:09:51
这里的组件名称与元素名称类似 . 这里我说的是表格元素。
您应该必须将名称更改为其他名称。
https://www.geeksforgeeks.org/reactjs-functional-components/
你能告诉我你用的是哪个框架来制作这张桌子吗？
解决方案2
0 2022-07-12 04:22:13
由于您的所有单元格仅包含键、标题名称和一个其他属性，因此这是一种无需太多工作即可解决问题的笨拙方法
但是 ... key={cell.toString()}也不正确，因为这将导致[object Object]
也许你想要key={key}代替
function getRow(cells) {
return cells.map(cell => {
const {key, headername, ...rest} = cell;
const data = Object.values(rest)[0];
if(Array.isArray(data)){
return (
<Cell key={cell.toString()}>
{
data.map(element => {
return <Badge intent={element} text="Primary" />
})
}
</Cell>
)
}
return <Cell>{data}</Cell>
})
}
反应组件内部函数的条件渲染不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.