Question

我有一个名为Widget的React组件，我希望将窗口小部件列表显示为表格。

让我们说小部件数组看起来像A, B, C, D, E, F, G，每个表行允许最多3个TD。所以结果将如下所示。

A  B  C 

D  E  F

G

尽管使用UI可以使用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>)
}

将React组件列表显示在表中

2 个答案: