Question

我有一个ReactJS HTML表组件，我使用setState方法更新其内容（单元格值）。这是基本代码：

 var Cell = React.createClass({
  render: function () {
    return (<td>{this.props.cellValue}</td>);
      }
    });

 var Row = React.createClass({
  render: function () {
     return (<tr>{this.props.row}</tr>);
   }
  });

var Table = React.createClass({
  getInitialState: function() {
    return {
      data: this.props.data
    };
  },
  render: function () {
    return (
      <table>
      {
        this.state.data.map(function(row) {
          var r = row.map(function(cell) {
            return <Cell cellValue={cell}/>;
          });

          return (<Row row={r}/>);
        })
      }
      </table>
     );
  }});

您可以这样使用它：

var initialData = [[1,2,3],[4,5,6],[7,8,9]];
var table = React.renderComponent(
  <Table data={initialData} />,
  document.getElementById('table')
);

这大部分时间都在工作。我可以通过执行此操作（在函数或其他任何地方）来更改数据：

var newData = [[1,2,3],[4,5,6],[7,8,9],[10,11,12]];
table.setState({data : newData});

如您所见，它在表的末尾添加了一行。但是，如果我尝试在此更新后设置初始数据，或以任何方式缩短行数，方法是将data设置为较小的数组（例如[[1, 2, 3], [4, 5, 6]]，应删除最后一行）：

table.setState({data : initialData});

我收到此错误：

TypeError：updatedChildren [j]未定义 updatedChildren [j]的.parentNode.removeChild（updatedChildren [J]）;

它来自哪里？

Answer 1

某些浏览器（使用Firefox和Chrome测试）会自动将<tbody>...</tbody>标记添加到没有它们的HTML表格中。在我的表组件中添加它们可以解决问题：

render: function () {
    return (
      <table><tbody>
      {
        ... same code as before ...
      }
      </tbody></table>
     );

如果你看看React生成的html代码，你可以注意到它为React组件呈现的所有HTML标签添加了一些数据属性（data-reactid）（更多关于数据属性的信息：{ {3}}）。由于<tbody>...</tbody>标记不是来自React组件，因此它们没有任何data-reactid，这些属性可帮助React跟踪DOM节点。

无论如何，感谢这些谈论这个问题的人。这里是链接go here。

有关data-reactid的更多信息：https://groups.google.com/forum/#!topic/reactjs/NLs-PdrdDMA。

从表中删除行会导致TypeError

1 个答案: