Какой тег следует использовать, чтобы содержать несколько элементов th

Question

Я получаю Adjacent JSX elements must be wrapped in an enclosing tag, когда я делаю следующее.

<tr>
    { R.repeat((
        <th>First</th>
        <th>Last</th>
    ), 3) }                    
</tr>

Во что должны быть обернуты пары тэгов?

Answer 1

Я нашел альтернативу подходу, который использовал, но все равно было бы любопытно, если бы были другие способы ...

<tr>
    { R.repeat((
        R.map((n) => (<th key={ n }>{ n }</th>), ['Port', 'Reports'])
    ), 3)}
</tr>

Answer 2

Вы можете обернуть элементы в Fragment, чтобы вы больше не получали эту проблему. Вы можете проверить документы здесь

<tr>
    { R.repeat((
        <React.Fragment>
          <th>First</th>
          <th>Last</th>
        </React.Fragment>
    ), 3) }                    
</tr>

Альтернативный синтаксис

<tr>
    { R.repeat((
        <>
          <th>First</th>
          <th>Last</th>
        </>
    ), 3) }                    
</tr>