web-dev-qa-db-ja.com

JSXTransformerの少数のTDタグを正しくラップする方法は？

アイテムの配列があり、次のようなものを作成したい：

<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）：要素が見つかりません。これはおそらくDOMが予期せず変更されたことを意味します

<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では許可されていません。

reactjsreact-jsx
52
Eldar Nezametdinov

したがって、<td>から返す.map要素のペアがあります。これを行う最も簡単な方法は、それらを配列にラップすることです。

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

最初の</td>の後のコンマを忘れないでください。

47
Brigand

通常、次のエラーは、ラッピング要素なしで複数の要素を返すときに発生します

隣接するXJS要素は、囲むタグでラップする必要があります

好む

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

効果的に2つの結果を返すため、これは機能しません。1つの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.$1">
    <td class="info" data-reactid=".0.0.$1.$0.0">1</td>
    <td data-reactid=".0.0.$1.$0.1">2</td>
    <td class="info" data-reactid=".0.0.$1.$1.0">1</td>
    <td data-reactid=".0.0.$1.$1.1">2</td>
    <td class="info" data-reactid=".0.0.$1.$2.0">1</td>
    <td data-reactid=".0.0.$1.$2.1">2</td>
    <td class="info" data-reactid=".0.0.$1.$3.0">1</td>
    <td data-reactid=".0.0.$1.$3.1">2</td>
</tr>
83
Chad Scira

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
Yo Wakita

これがあなたのやり方です

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