ES6 class で Component 書いたら react-devtools で Unknown になったので対応した

react-devtools で Unknown がでる場合

タイトル長いですね。ともかく、ES6 class で Component を書いたら react-devtools で Unknown になってしまった話。

facebook/react-devtools について、無いと死んでしまう!ってほどの有り難みは感じていないのですが、いざ開いたときに Unknown だと残念なので対応しました。

辛い見た目

export default class MyComponent extends React.Component {} のように書いたら、コンポーネント名が取得できず Unknown だらけになりました。

<Top Level>
  <Unknown>
    <div>
      <h1>Hello World!</h1>
      <Unknown index="0" tabs="..."></Unknown>
      <Unknown index="0"></Unknown>
    </div>
  </Unknown>
</Top Level>

対応

react-devtools/DOMHost.js at fa6a0aff240ffa55a4f7c373f427ae8825b2af7a を見る限り、少なくとも getDisplayName() が Component に実装されていれば良さそうなので下記のようにしました。

export default class BaseComponent extends React.Component {
  /**
   * for react-devtools
   * @returns {string}
   */
  getDisplayName() {
    return Object.getPrototypeOf(this).constructor.name;
  }
}

getDisplayName() を実装したクラスを、すべての Component が継承するようにします。

直った

constructor.name がある限りは表示されます。最近のブラウザなら大体大丈夫でしょう、というか Chrome Extension 前提なので何でもいいです。

<Top Level>
  <Top>
    <div>
      <h1>Hello World!</h1>
      <ViewPagerSelector index="0" tabs="..."></Unknown>
      <ViewPagerContainer index="0"></Unknown>
    </div>
  </Top>
</Top Level>

後期

伝統的な React.createClass() を使ったときには発生しない現象(のはず)です。

あたりに関連すると思われますが、詳細追っかけてないです。displayName プロパティを生やすのは手元で試したら動かなかった謎。