JSXtransformer의 TD 태그 몇 개를 올바르게 랩하는 방법

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>태그 첨부로 올바르게 동작하지 않습니다.

답변은 이쪽: 검출되지 않은 오류:불변 위반: find ComponentRoot(......$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 태그 몇 개를 제대로 포장하는 방법을 알려주세요!가이드의 Dynamic Children을 사용해 보았습니다만, JSXtransformer에서는 사용할 수 없습니다.

다음 오류는 일반적으로 래핑 요소 없이 여러 요소를 반환할 때 발생합니다.

인접한 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.$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>

편집: 리액션 16 이상

React 16 이후 fragment를 사용할 수 있게 되었습니다.

지금 이렇게 하면 돼

return <>
    <li></li>
    <li></li>
<>;

또는 를 사용할 수 있습니다.<React.Fragment>,<>는 HTML fragment의 줄임말로 기본적으로 컨테이너로 기능하는 일시적인 부모 요소이며 문서에 추가되면 존재하지 않게 됩니다.

https://reactjs.org/docs/fragments.html

https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

그래서 당신은 한 쌍이 있다.<td>에서 반환하고 싶은 요소.map가장 쉬운 방법은 배열로 랩하는 것입니다.

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

첫 번째 뒤에 쉼표를 잊지 마세요.</td>.

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

방법은 다음과 같습니다

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

언급URL : https://stackoverflow.com/questions/25034994/how-to-correctly-wrap-few-td-tags-for-jsxtransformer