Как правильно обернуть несколько тегов TD для JSXTransformer?

у меня есть массив с элементами, и я хочу сделать что-то вроде этого:

<tr>
(until have items in array
<td></td><td></td>)
</tr>

но если я это сделаю, я получаю ошибку JSXTransformer:

соседние элементы XJS должны быть обернуты в закрывающий тег

рабочая версия:

{rows.map(function (rowElement){
    return (<tr key={trKey++}>
        <td className='info' key={td1stKey++}>{rowElement.row[0].value}</td><td key={td2ndKey++}>{rowElement.row[0].count}</td>
        <td className='info' key={td1stKey++}>{rowElement.row[1].value}</td><td key={td2ndKey++}>{rowElement.row[1].count}</td>
        <td className='info' key={td1stKey++}>{rowElement.row[2].value}</td><td key={td2ndKey++}>{rowElement.row[2].count}</td>
        <td className='info' key={td1stKey++}>{rowElement.row[3].value}</td><td key={td2ndKey++}>{rowElement.row[3].count}</td>
        <td className='info' key={td1stKey++}>{rowElement.row[4].value}</td><td key={td2ndKey++}>{rowElement.row[4].count}</td>
                 .......
        </tr>);
})}

я попробовал этот. Но с <div> заключительный тег он не работает нормально.

ответ здесь: Неперехваченная ошибка: инвариантное нарушение: findComponentRoot(..., ...$110): не удается найти элемент. Возможно, в их дом неожиданно мутировал

<tbody>
    {rows.map(function (rowElement){
        return (<tr key={trKey++}>
        {rowElement.row.map(function(ball){
            console.log('trKey:'+trKey+' td1stKey'+td1stKey+' ball.value:'+ball.value+' td2ndKey:'+td2ndKey+' ball.count:'+ball.count);
            return(<div key={divKey++}>
                <td className='info' key={td1stKey++}>{ball.value}</td><td key={td2ndKey++}>{ball.count}</td>
            </div>);
        })}
        </tr>);
    })}
</tbody>

пожалуйста, посоветуйте мне, как правильно обернуть несколько тегов TD! Я пробовал использовать руководство Динамическая Детей, но JSXTransformer не позволяет мне это сделать.

4 52
reactjs react-jsx

4 ответа:

так что у вас есть пары <td> элементы, которые вы хотите вернуться из .map. Самый простой способ сделать это-просто заверните их в массив.

<tr>
  {data.map(function(x, i){
    return [
      <td>{x[0]}</td>,
      <td>{x[1]}</td>
    ];
  })}
</tr>

не забудьте запятую после первого </td>.

47

следующая ошибка обычно возникает, когда вы возвращаете несколько элементов без элемента обертывания

соседние элементы XJS должны быть обернуты в закрывающий тег

как

return (
    <li></li>
    <li></li>
);

Это не работает, потому что вы эффективно возвращаете два результата, вам нужно только когда-либо возвращать один узел DOM (с детьми или без детей), например

return (
    <ul>
        <li></li>
        <li></li>
    </ul>
);

// or 

return (<ul>
    {items.map(function (item) {
        return [<li></li>, <li></li>];
    })}
</ul>);

для меня, чтобы правильно ответить на ваш вопрос не могли бы вы предоставить в JSFiddle? Я попытался угадать, что вы пытаетесь сделать, и вот JSFiddle это работает.

при использовании div в качестве обертки его на самом деле никогда не отображается в DOM (не знаю, почему).

<tr data-reactid=".0.0.">
    <td class="info" data-reactid=".0.0...0">1</td>
    <td data-reactid=".0.0...1">2</td>
    <td class="info" data-reactid=".0.0...0">1</td>
    <td data-reactid=".0.0...1">2</td>
    <td class="info" data-reactid=".0.0...0">1</td>
    <td data-reactid=".0.0...1">2</td>
    <td class="info" data-reactid=".0.0...0">1</td>
    <td data-reactid=".0.0...1">2</td>
</tr>
83

С выходом React 16,есть новый компонент под названием Fragment. Если вы хотите вернуть коллекцию элементов / компонентов без необходимости обертывать их в заключительный элемент, вы можете использовать Fragment вот так:

import { Component, Fragment } from 'react';

class Foo extends Component {

  render() {
    return (
      <Fragment>
        <div>Hello</div
        <div>Stack</div>
        <div>Overflow</div>
      </Fragment>
    );
  }
}
1

вот как вы это сделаете

<tbody>
    {this.props.rows.map((row, i) =>
      <tr key={i}>
        {row.map((col, j) =>
          <td key={j}>{col}</td>
        )}
      </tr>
    )}
</tbody>
0