时间戳

首页 > 解决方案 > 无法在嵌套的花括号内呈现 JSX

node.js - 无法在嵌套的花括号内呈现 JSX

问题描述

我有一个这样的反应表

    function myComponent() {
       const rows = [some, data, from, http, request]
       const tableType = "rowForTable1"; // lets just say table1, but really this is dynamically retrived via http request.
    return (
    <div className={classes.root}>
          <Paper className={classes.paper}>
            <EnhancedTableToolbar numSelected={selected.length} />
            <TableContainer>
              <Table
             <TableBody>
                          {rows.map((row) => {             
                              {RowType(tableType.toLowerCase(), row).map((col) => { 
                                  console.log(col); // I can see the column values thru this
                                  <TableRow
                                    hover
                                    onClick={(event) => handleClick(event, row.name)}
                                    role="checkbox"
                                    aria-checked={isItemSelected}
                                    tabIndex={-1}
                                    key={row.name}
                                    selected={isItemSelected}
                                  >
                                    <TableCell key={col} align="right">{col}</TableCell> // BUT I CANNOT SEE THIS getting displayed in the page
                                  </TableRow>);
                              })}
                              
                          })}
                        </TableBody>
            </Table>
         </TableContainer>
       </Paper>
    </div>
);
}
        
        function RowType(tableType, row) {
          const funcMap = 
             rowForTable1: [row.tabl1Col1, row.tabl1Col2, row.tabl1Col3],
             rowForTable2: [row.tabl2Col1, row.tabl2Col2, row.tabl2Col3],
          }
        
          return funcMap[tableType];
        }

行被传递给这个表，并被 rows.map 迭代

所以对于不同的http请求有不同的表格内容显示所以我通过函数RowType（TheTypeOfTable，andTheRow）使表格行动态化

现在的问题是，我通过console.log（列）验证了第一个和第二个（内部）地图迭代是正确的，只是负责渲染的内部地图<TableRow>没有显示任何内容

任何人都知道如何正确地做到这一点？

标签： node.jsreactjs

解决方案

您必须return从地图功能到 TableRow。

        {rows.map((row) => ( // Here we use ROUND braces to auto return the next statement             
            RowType(tableType.toLowerCase(), row).map((col) => {
                console.log(col);
                return ( // return row
                    <TableRow
                        hover
                        onClick={(event) => handleClick(event, row.name)}
                        role="checkbox"
                        aria-checked={isItemSelected}
                        tabIndex={-1}
                        key={row.name}
                        selected={isItemSelected}>
                        <TableCell key={col} align="right">{col}</TableCell>
                    </TableRow>
                )
            })
        ))}

带有花括号且没有 return 语句的映射会导致 void[] 并且不会在父级中添加任何内容。

像 <TableRow> 这样的调用被转换为返回对象的常规函数​​调用。如果你不使用结果，那么什么都不会发生。没有神奇的副作用。

推荐阅读