Я заполняю таблицу путем сопоставления каждой строки и внутри сопоставления каждого столбца. Я хочу включить экземпляр 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)

И условная логика не работает.

Как я могу это сделать ?

0
Yossi 20 Авг 2018 в 11:05

4 ответа

Лучший ответ

Изменения (они решат обе проблемы):

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>
    )
  })
}
2
Mayank Shukla 20 Авг 2018 в 08:35

Вы должны использовать это так:

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 />
1
Bhojendra Rauniyar 20 Авг 2018 в 08:40

Реагирует не на склеивание строк. Вы не можете сделать

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

Вы должны работать с целыми объектами, должно быть что-то вроде этого

return (
  {index === 1 ? <NavLink  >
      <TableCell />
    </NavLink>
    : <TableCell />
  }
)
0
xadm 20 Авг 2018 в 08:32

Вы можете использовать выражение

to={`/brokers/${n.id}`}
1
Meir 20 Авг 2018 в 08:11
51926457