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

Question

错误:

main.js:1583 Uncaught Error: Objects are not valid as a React child (found: [object HTMLTableElement]).如果您打算渲染子集合，请改用数组或使用 React 附加组件中的 createFragment(object) 包装对象。

---

代码:

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>
 )

注意:您需要在“ map ”中为 jsx 的根输入一个唯一键。确定每次迭代的唯一键。作为最后的手段，您可以使用 index ，但不推荐这样做。

编辑:针对新变化进行了更新

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

您需要的其他更改

您的初始状态不应生成 JSX。它应该只用于计算初始状态并返回一个普通对象。您正在返回一个包含 JSX 元素数组的对象，这从根本上违背了 React 的目的，即它需要根据 prop 适本地动态更新 DOM。/state变化。你的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 传递一些 child 的方法使其在屏幕上可见。你质疑它是空的，所以你发布的图像显示 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>);
 }