カテゴリー: 未分類

ReactjsでTodoリストのようなものを作って削除処理でsetStateするとエラーが発生

Uncaught Error: Invariant Violation: processUpdates(): Unable to find child 8 of element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID `.0.3.0.1`

エラー通り、tableタグにtheadとtbodyをつけてなかったのが原因でした

var jobBox = React.createClass({
  onJobDelete(id) {
    this.props.onJobDelete(id);
  },
  render() {
    var jobLines = this.props.jobs.map((job, i) => {
      return <JobLine key={i} onDelete={this.onJobDelete} job={job} />;
    });

    return (
      <div>
        <table>
        <thead>
          <tr>
            <th>注文No.</th>
            <th>部品名</th>
          </tr>
        </thead>
        <tbody>
          {jobLines}
        </tbody>
        </table>
      </div>
    );
  }
});

一部ですがこんな感じです
theadとtbodyがないとDOM操作ができないようでした

入門 React ―コンポーネントベースのWebフロントエンド開発

posted with ヨメレバ

Frankie Bagnardi,Jonathan Beebe,Richard Feldman,Tom Hallett,Simon HØjberg,Karl Mikkelsen オライリージャパン 2015-04-03

Amazon

Kindle

楽天ブックス

7net

React.jsでharmony optionを有効にしてみました

<script type="text/jsx;harmony=true">
// some code
</script>

これだけ
これでES6とかの一部が使えるようになるみたいです

  render: function() {
    return (
      <div>Hello</div>
    );
  }

が

  render() {
    return (
      <div>Hello</div>
    );
  }

できたり
アロー関数 – JavaScript | MDNとか便利です
これからES6も覚えたいと思います

入門 React ―コンポーネントベースのWebフロントエンド開発

posted with ヨメレバ

Frankie Bagnardi,Jonathan Beebe,Richard Feldman,Tom Hallett,Simon HØjberg,Karl Mikkelsen オライリージャパン 2015-04-03

Amazon

Kindle

楽天ブックス

7net