Reactコンポーネントのリストをテーブルに表示

Question

私はWidgetというReactコンポーネントを持っており、ウィジェットのリストをテーブルとして表示したいと思います。

ウィジェットの配列がA, B, C, D, E, F, Gのように見えますが、テーブルローごとに最大3 TDを許可します。結果は次のようになります。

A B C 

D E F 

G 

見出しラベル用のテーブルを電子シンプルなラインスキップは、ULを使用して、CSSで行うことができますが、私は私たちに持っていますが。

私は[[A,B,C], [D,E,F], [G]]のようなアレイのリストに元の配列を作ってみました：

{ 
    chunkedPartsArray.map((chunk, ind) => { 
      return (<tr> 
      { 
        chunk.map((obj, ind) => { 
         return {obj} 
        }) 
      } 
      </tr>) 
    }) 
} 

上記のコードは私に次の警告

Uncaught Error: Objects are not valid as a React child (found: object with 
keys {obj}). If you meant to render a collection of children, use an array 
instead or wrap the object using createFragment(object) from the React add- 
ons. Check the render method of WidgetsTab. 

どのように私はこの問題を解決することができますを与えますか？

Answer 1

td要素内にウィジェットをラップする必要があります。私はキャラクターを使ってデモンストレーションをしました。

class App extends React.Component { 
 
    render() { 
 
    var chunkedPartsArray = [['A','B','C'], ['D','E','F'], ['G']] 
 

 
return (
 
      <tbody>{chunkedPartsArray.map((chunk, ind) => {   
 
      console.log(chunk); 
 
      return (<tr> 
 
      { 
 
        chunk.map((obj, ind) => { 
 
         console.log(obj); 
 
         return <td>{obj}</td> 
 
        }) 
 
      } 
 
      </tr>) 
 
      }) 
 
      }</tbody> 
 
    ) 
 

 
    } 
 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script> 
 
<div id="app"></div>

Answer 2

あなたはそこに関数を作成し、HTMLを返すことができます。 が反応している場合は、複数の場合はdivにコンポーネントをラップする必要があります。 子にはプレースホルダが必要で、関数からは返さなければなりません。

//in a file after imports 
function getChunkedParts(chunk, ind){ 

function getChunks(obj, ind){return (<td>{obj}</td>)} 

var chunks =chunk.map((obj, ind) =>getChunks(obj, ind)); 
return (<tr>{chunks} </tr>) 
}} 

//parent render 
render{ 
var ChunkedParts = chunkedPartsArray.map((chunk, ind) =>getChunkedParts(chunk, ind); 
return(<table>{ChunkedParts }</table>) 
}