Question

我通过映射每一行并在内部映射每一列来填充表。我想仅在NavLink实例的每一行的第一列中启用它。我还想使用ID行并将其连接到path。现在我有这个：

       {props.tableData
        .map(n => {
          return (
            <TableRow key={n.id}>
              <TableCell component="th" padding="checkbox">
                <Switch
                  checked={n.commission === 1}
                  onChange={(event) => props.setPayment(n.id, event.target.checked)}
                  color="primary"
                />
              </TableCell>
              {
                Columns.map((c,index) => {
                  return (
                    index === 1 && <NavLink className={classes.navLink} activeClassName={classes.activeNavLink}  to "/brokers/".concat(n.id) >
                    <TableCell key={c.key} component="th" padding="checkbox">{c.format(n[c.key])}</TableCell>
                    index === 1 && <NavLink />
                  )
                })
              }
             ......

连接失败：

to "/brokers/".concat(n.id)

条件逻辑不起作用。

我该怎么办？

Answer 1

更改（它们将解决两个问题）：

1-我们无法返回多个元素，因此请使用React.Fragment（不会向DOM添加额外的节点）。

2-使用template literals将变量放入字符串中。

使用此代码：

{props.tableData
  .map(n => {
    return (
      <React.Fragment>
        <TableRow key={n.id}>
          <TableCell component="th" padding="checkbox">
            <Switch
              checked={n.commission === 1}
              onChange={(event) => props.setPayment(n.id, event.target.checked)}
              color="primary"
            />
          </TableCell>
          {
            Columns.map((c,index) => {

              const cell = <TableCell key={c.key} component="th" padding="checkbox">{c.format(n[c.key])}</TableCell>;

              if (index === 1) {
                return (
                  <NavLink key={c.key} className={classes.navLink} activeClassName={classes.activeNavLink}  to={`/brokers/${n.id}`} >
                    {cell}
                  </NavLink>
                )
              }
              return cell;
            })
          }
        </TableRow>
      </React.Fragment>
    )
  })
}

Answer 2

您可以使用表达式

to={`/brokers/${n.id}`}

Answer 3

您应该这样使用：

to={`/brokers/${n.id}`}

索引从0开始而不是从1开始。因此，您需要将条件设置为与零匹配：

index === 0 &&

这将解决您的问题：

{
 index === 0 && 
 <NavLink 
  className={classes.navLink} 
  activeClassName={classes.activeNavLink} 
  to={`/brokers/${n.id}`}>
}
    <TableCell 
      key={c.key} 
      component="th" 
      padding="checkbox">
        {c.format(n[c.key])}
    </TableCell>
{index===0 && </NavLink>}
 // not <NavLink />

Answer 4

反应不是字符串粘合。您不能

return (
  index === 1 && <NavLink  >
    <TableCell />
  index === 1 && <NavLink />
)

您必须对整个对象进行操作，应该是这样

return (
  {index === 1 ? <NavLink  >
      <TableCell />
    </NavLink>
    : <TableCell />
  }
)

反应有条件地设置导航

4 个答案: