javascript - React 有条件地设置导航

Question

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

       {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)

而且条件逻辑不起作用。

我该怎么做 ？

标签： javascriptreactjs

Answer 1

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

1-我们不能返回多个元素，所以使用React.Fragment（它不会向 DOM 添加额外的节点）。

2-使用模板文字将变量放在字符串中。

使用此代码：

{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>
    )
  })
}