React의 테이블 테이블 열 데이터

Question

현재 배열 매핑을 사용하여 정의한 여러 열이 테이블에 두 개의 행으로 표시됩니다. 그러나 마지막 열 또는 모든 행에 단추가 있어야하지만 지금은 텍스트를 기록하려고 할 때 표시되지 않습니다. 왜 이런거야? 내 코드는 <TableRowColumn> INSERT BUTTON HERE </TableRowColumn>

row 내부 map 기능에

const row = (currentValue, index, header) => (
    <TableRow key={`t-${index}`}> 
{ 
    header.map((headerName, index) => { 
    return (
     <TableRowColumn key={`trc-${index}`}> 
     {currentValue[headerName.prop]} 
     </TableRowColumn> 
     <TableRowColumn> 
     INSERT BUTTON HERE 
    </TableRowColumn> 
) 
    }) 
} 
    </TableRow> 
); 


export default ({ data, header }) => 
<Table> 
<TableHeader> 
    <TableRow> 
    { 
     header.map((headerName, index) => // single line arrow implied return 
     <TableHeaderColumn key={`thc-${index}`}> 
      {headerName.name} 
     </TableHeaderColumn> 
    ) 
    } 
    </TableRow> 
</TableHeader> 
<TableBody> 
    {data.map((currentValue, index) => row(currentValue, index, header))} 
</TableBody> 
</Table> 

Answer 1

, 당신은 하나 개의 부모 요소에 싸여되지 않는 여러 요소 (이 <TableRowColumn>들)을 반환하려고 말한다 어디 로그온하는 데 노력하고있어 텍스트는 . 논의 된대로 here, 그것은 유효한 구조가 아닙니다. 각 리턴 문이 하나 개의 요소를 반환해야 있도록 논리를 다시 작성할 수

header.map((headerName, index) => { 
    return ([ 
    <TableRowColumn key={`trc-${index}`}> 
     {currentValue[headerName.prop]} 
    </TableRowColumn>, 
    <TableRowColumn> 
     INSERT BUTTON HERE 
    </TableRowColumn> 
    ]); 
}); 

을 또는 :

대신 열의 배열을 반환 시도 할 수 있습니다.