Question

我有一个简单的组件，可以将其他组件的实例表示为html表。

class Table extends Component {

    render() {
        const { data } = this.props;

        const articles= data.map((el, i) =>
            <tr><td><Post post={el}/></td></tr>);

        return <table>
                    {articles}
                </table>;

}

现在我每行只有一个表单元格。例如，我想每行放置三个单元格。

我尝试过这样的事情

const articles = data.map(function(el, i) {
    i++;
    if (i == 1)
        return <tr><td><Post post={el}/></td>;
    else if (i % 3 == 0)
        return <td><Post post={el}/></td></tr>;
    else if (i % 4 == 0)
        return <tr><td><Post post={el}/></td>;
    else
        return <td><Post post={el}/></td>;
});

反正这是一个不好的方法。但是在JSX中，这是不可能的，因为我收到错误消息“ JSX内容未定义”。

ReactTable不适合我，因为我有其他组件的表，而不是数据网格。

Answer 1

应该使用any suitable implementation将数据数组分成多个块，例如Lodash。然后可以处理数组的数组：

container sharing network namespace with another container or host cannot be connected to any other network

Answer 2

您可以使用lodash chunk创建一个数组，其中每个子数组代表一行。

示例

class Table extends React.Component {
  render() {
    const { data } = this.props;
    const rows = _.chunk(data, 3);

    const articles = rows.map((row, i) => (
      <tr key={i}>
        {row.map((cell, i) => (
          <td key={i}>{cell}</td>
        ))}
      </tr>
    ));

    return <table>{articles}</table>;
  }
}

ReactDOM.render(
  <Table data={[1, 2, 3, 4, 5, 6, 7]} />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 3

您正在以错误的方式进行操作。一个更简单的解决方案是，将数据简单地处理为您想要使用的形状，然后编写代码以呈现它。

..即，将数据转换为具有3列和ceil（n / 3）列的二维数组，其中数组中的元素数量。

然后，您可以简单地在第一个维度上映射以创建<tr><tr/>元素，对于每一行，您可以在3个元素上映射以创建<td></td>元素。

请注意，我并不是说如果不创建此中间数据源就无法执行此操作，只是如果您的数据结构类似于组件层次结构，总是比较容易。

在JSX的组件表中设置单元格数

3 个答案: