Question

错误：

main.js：1583未捕获错误：对象作为React子对象无效（找到：[object HTMLTableElement]）。如果您要渲染子集合，请使用数组，或者使用React附加组件中的createFragment（object）包装对象。

CODE：

var size = 40

var Board = createReactClass ({

    getInitialState() {
        var array = [];
        var cellsArray = [];
        for (var i = 0; i < size; i ++) {
            array.push(cellsArray);
            for (var j = 0; j > size; j++) {
                array[i].push(<Cell start={this.props.start}/>);
            }
        }

        return {
            array: array
        };

    },

    render() {

    var i = 0;

    var tableData = this.state.array.map(rowData => {
        i++
        return (
            <tr key={i}>
                {
                    rowData.map(cellData => {
                        return ({cellData});
                    })
                }
            </tr>
        );
    })

    return (
        <table>
            <tbody>
                {tableData}
            </tbody>
        </table>
    );

}

})

var Cell = createReactClass ({

    getInitialState() {
        return {
            selected : false,
        }
    },

    handleClick() {
        this.setState({
            selected: !this.state.selected
        })
    },

    render() {
        return <td onClick = {this.handleClick} className={this.state.selected ? "cell selected" : "cell"}></td>;
    }
})

问题：

我想渲染以编程方式创建的表。我怎么能这样做？

更新

CSS：

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

.selected {
    background-color: black;
}

table {
    border: 1px solid black;
    border-collapse: collapse;
    margin: auto;
    margin-bottom: 50px;
}

Answer 1

您需要以React方式创建它。您的createTable方法应如下所示。

createTable(tableData) {
 return (
  <table>
   <tbody>
   {
    tableData.map(rowData => {
      return (<tr key={rowData.Id}>
          {
           rowData.map(cellData => {
              return (<td key={cellData}> {cellData} </td>);
           })
          }
        </tr>);
    })
   }
  </tbody>
  </table>
 )

注意：您需要在“maps”中为jsx的根目录添加唯一键。确定每次迭代的唯一键。作为最后的手段，您可以使用index，但不建议这样做。

编辑：更新了新的更改

在更新的代码中，td为空，因此在页面上显示为空。

您需要的其他更改

您的初始状态不应生成JSX。它应该仅用于计算初始状态并返回普通对象。您正在返回一个包含JSX元素数组的对象，这从根本上违背了React的目的，即它需要根据prop / state更改动态更新DOM。您的initialState应该只包含构建所需DOM元素所需的数据。

getInitialState() {
    var array = [];
    var cellsArray = [];
    for (var i = 0; i < size; i ++) {
        array.push(cellsArray);
        for (var j = 0; j > size; j++) {
            array[i].push(/* push data that you need to construct your cell */);
        }
    }

    return {
        array: array
    };

}

然后在tableData函数中，您需要构建所需的JSX。这个函数在render内部调用，这是生成DOM元素的绝佳位置。

var tableData = this.state.array.map(rowData => {
    i++
    return (
        <tr key={i}>
            {
                rowData.map(cellData => {
                    return <Cell key={cellData} data={cellData} start={this.props.start} />
                })
            }
        </tr>
    );
})

最后，在您的Cell，render方法中，您需要为td传递一些孩子，以便在屏幕上显示。在你质疑它是空的，所以你发布的图像显示DOM元素，它是空的是正确的行为。你需要做类似下面的事情

render() {
    return (<td onClick = {this.handleClick} className={this.state.selected ? "cell selected" : "cell"}>
 {this.props.data }
 { /*  or whatever data you want to be put here */ }
  </td>);
 }

如何在React中呈现以编程方式创建的表？

1 个答案: