Question

我想在班级的render() method中生成一个表格。

所以在过去的不同示例/项目中，我已将div推送到数组然后返回此数组并且它在显示方面工作正常但在这种情况下，当我调用this.tableGenerator()时，它将结果显示为纯文本，不呈现HTML。

你能告诉我为什么会这样吗？或者也许还有另一种方法可以循环使用这个表格吗？

tableGenerator = () => {

    let table = [];

    table.push('<tr>');
    //loop for columns

    table.push('</tr>');

    return table;

}

以下是我所讨论的示例：它生成一个div的板，现在我想将其更改为显示为表格：

createMap = (cols, total) => {
    let table = []; let nL = ''; let idRow = 0; let idCol = 0;

    for (let i = 0; i < total; i++) {
      idCol++;
      if (i%cols === 0){
        nL = 'newLine';
        idRow += 1;
        idCol = 1;
      }
      else {
        nL = '';
      }

      let toggledBackground = '';

        switch (this.state.cellStates[i]) {
          case 1:
            toggledBackground = 'alive';
            break;

          case 2:
            toggledBackground = 'dead';
            break;

          default:
            toggledBackground = '';
        }

      table.push(<div id={"pos-"+idRow+"-"+idCol} className={"square "+nL+" "+toggledBackground} onClick={() => this.changeState(i)}></div>);
    }
    return table;
  }

Answer 1

你需要这样的东西：

tableGenerator = () => {
  return (
    <table>
      <tr>
        {columns.map(column => <th>{column.data}</th>)}
      </tr>
    </table>
  );
}

其中column.data是您要显示的信息（我将数据用作一般值，但可以是标签，名称，信息等）。

React - 在类方法中使用循环创建表

1 个答案: