React.js使っててはまったこと

初めて投稿します。
最近転職をしましてreact.js使ってます。

使っててはまったところを書きたいと思います。
2個しかないですけど。
※予想を多分に含むので間違ってる可能性があります。

tableの下にtrを直接書かずにtbodyはさみましょう

参考：
http://stackoverflow.com/questions/26689900/react-js-invariant-violation-processupdates-when-rendering-a-table-with-a-di

var React = require('react');

var MyClass = React.createClass({
  render:function(){
    var trs = this.props.elements.map(function(e){
      return (<tr><td>{e.hoge}</td></tr>);
    });
    return (
      <table>
        {trs}
      </table>);
  }
}

は

var React = require('react');

var MyClass = React.createClass({
  render:function(){
    var trs = this.props.elements.map(function(e){
      return (<tr><td>{e.hoge}</td></tr>);
    });
    return (
      <table>
        <tbody>
          {trs}
        </tbody>
      </table>);
  }
}

ってしましょうねってことです。
しないと

Unable to find child 2 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 parent.

って感じのエラーが出ます。
たぶんブラウザ（確認したブラウザはChrome）が勝手にtbodyを追加して仮想DOMとの整合性が取れなくなってエラーになっていると思われます。

react-bootstrapのPanelGroup・Accordionに気を付けよう。

react-bootstrap
使ってる人用。

ref

var React = require('react');
var ReactBootstrap = require('react-bootstrap');
var PanelGroup = ReactBootstrap.PanelGroup;
var Panel = ReactBootstrap.Panel;

const ControlledPanelGroup = React.createClass({
  getInitialState() {
    return {
      activeKey: 1
    };
  },

  handleSelect(activeKey) {
    this.setState({ activeKey });
  },

  render() {
    return (
      <PanelGroup activeKey={this.state.activeKey} onSelect={this.handleSelect} accordion>
        <Panel ref='Panel1' header='Panel 1' eventKey='1'>Panel 1 content</Panel>
        <Panel ref='Panel2' header='Panel 2' eventKey='2'>Panel 2 content</Panel>
      </PanelGroup>
    );
  }
});

ってPanelにrefつけてみましたけどControlledPanelGroupのrefsにはPanel1もPanel2も入ってません。
ソースを見ると、
https://github.com/react-bootstrap/react-bootstrap/blob/master/src/PanelGroup.js
のrenderPanelのなかでcloneElementされて別物にされてるっぽいです。
たぶんこのせいかと思われます。

onSelect

さらに

var React = require('react');
var ReactBootstrap = require('react-bootstrap');
var Accordion = ReactBootstrap.Accordion;
var Panel = ReactBootstrap.Panel;

const ControlledAccordion = React.createClass({
  getInitialState() {
    return {
      activeKey: 1
    };
  },

  handleSelect(activeKey) {
    this.setState({ activeKey });
  },

  handlePanelSelect() {
    console.log('panel selected!!')
  },

  render() {
    return (
      <Accordion activeKey={this.state.activeKey} onSelect={this.handleSelect} accordion>
        <Panel header='Panel 1' eventKey='1' onSelect={this.handlePanelSelect}>Panel 1 content</Panel>
        <Panel header='Panel 2' eventKey='2' onSelect={this.handlePanelSelect}>Panel 2 content</Panel>
      </Accordion>
    );
  }
});

と、Accordionにして、PanelのonSelectにbindしてみましたけど、
onSelectはPanelGroup.jsの中で明らかに上書きされるので、
一生実行されることはありません。
（もしかしてただのPanelGroupでもそうなるのかも？）

以上、react.js使っててはまったことでした。
追加で見つけたら書いていこうと思います。