Question

CODE：

这是我想要实现的一些伪代码：

class Board extends React.Component {
    render() {

        cells = for (var i = 0; i < 50; i++) {
            return <Cell />;
        }

        board = for (var i = 0; i < 50; i++) {
            return <tr>{cells}</tr>;
        }

        return (
            <table>
                {board}
            </table>
        );
    }
}

在React中创建这个方形250单元阵列的正确方法是什么？

class Cell extends React.Component {
    render() {

        return (
            <div className="cell"></div>
        );

    }   
}

状况：

尝试在React中渲染50x50表。

Answer 1

您仍在考虑使用标记，但React允许您使用对象。在JSX中执行<div>x</div>时，您创建对象。您收到的是"[object Object]"，因为这是您将+应用于未以任何特殊方式定义toString的对象时获得的内容（例如，默认Object.prototype.toString一样）。

相反，建立一个单元格数组，一组行等等;见评论：

class Board extends React.Component {
    render() {
        // Build the rows in an array
        let rows = [];
        for (let y = 0; y < 10; y++) {
            // Build the cells in an array
            const cells = [];
            for (let x = 0; x < 10; x++) {
                cells.push(<Cell />);
            }
            // Put them in the row
            rows.push(<tr>{cells}</tr>);
        }
        // Return the table
        return <table><tbody>{rows}</tbody></table>;
    }
}

class Cell extends React.Component {
    render() {
        return <td className="cell"></td>;
    }
}

ReactDOM.render(
    <Board />,
    document.getElementById("react")
);

.cell {
  width: 1em;
  height: 1em;
  border: 1px solid #ddd;
}

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

（我将其简化为10x10以便轻松适应，并在td中使用div而不是Cell。）

为清晰起见，这是冗长的版本。使用Array.from，如果我们需要，我们可以使Board看起来像这样：

const Board = _ =>
  <table>
    <tbody>
    {Array.from({length:10}, _ =>
        <tr>{Array.from({length:10}, _ => <Cell />)}</tr>
    )}
    </tbody>
  </table>
;

使用无状态功能组件（一个只是一个函数的组件）并通过Array.from的映射函数构建行，我们在其中使用{{1}构建单元格再次映射函数。

Array.from

const Board = _ =>
  <table>
    <tbody>
    {Array.from({length:10}, _ =>
        <tr>{Array.from({length:10}, _ => <Cell />)}</tr>
    )}
    </tbody>
  </table>
;

class Cell extends React.Component {
    render() {
        return <td className="cell"></td>;
    }
}

ReactDOM.render(
    <Board />,
    document.getElementById("react")
);

.cell {
  width: 1em;
  height: 1em;
  border: 1px solid #ddd;
}

要清楚：我在那里做了两个不同的，不相关的事情：1）使用SFC，以及2）使用<div id="react"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>和箭头功能。以下是不使用SFC的相同内容：

Array.from

class Board extends React.Component {
  render() {
    return (
      <table>
        <tbody>
        {Array.from({length:10}, _ =>
          <tr>{Array.from({length:10}, _ => <Cell />)}</tr>
        )}
        </tbody>
      </table>
    );
  }
}

class Board extends React.Component {
  render() {
    return (
      <table>
        <tbody>
        {Array.from({length:10}, _ =>
          <tr>{Array.from({length:10}, _ => <Cell />)}</tr>
        )}
        </tbody>
      </table>
    );
  }
}

class Cell extends React.Component {
    render() {
        return <td className="cell"></td>;
    }
}

ReactDOM.render(
    <Board />,
    document.getElementById("react")
);

.cell {
  width: 1em;
  height: 1em;
  border: 1px solid #ddd;
}

如何在React中渲染50x50表？

1 个答案: