7

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

ご覧のとおり、テーブルの最後に 1 行追加されます。ただし、この更新後に初期データを設定しようとした場合、または何らかの方法でより小さい配列に設定して行数を短縮した場合 (たとえば、最後の行を削除する必要があります):data[[1, 2, 3], [4, 5, 6]]

table.setState({data : initialData});

次のエラーが表示されます。

TypeError: updatedChildren[j] is undefined updatedChildren[j].parentNode.removeChild(updatedChildren[j]);

それはどこから来たのですか？

4

1 に答える 1

14

<tbody>...</tbody>一部のブラウザー (Firefox および Chrome でテスト済み) は、タグを持たない HTML テーブルに自動的にタグを追加します。テーブルコンポーネントにそれらを追加すると、問題が修正されます:

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

React によって生成された html コードを見るとdata-reactid、React コンポーネントによってレンダリングされるすべての HTML タグにいくつかのデータ属性 ( ) が追加されていることがわかります (一般的なデータ属性の詳細については、こちらを参照してください)。タグは React コンポーネントからのものではないため、<tbody>...</tbody>タグはありませんdata-reactid。これらの属性は、React が DOM ノードを追跡するのに役立ちます。

とにかく、この問題について話してくれたこれらの人々に感謝します。ここにリンクhttps://groups.google.com/forum/#!topic/reactjs/NLs-PdrdDMAがあります。

詳細data-reactid: https://groups.google.com/forum/#!topic/reactjs/ewTN-WOP1w8 .

于 2014-02-06T04:29:14.633 に答える