ReactJSサーバー側レンダリングでのドキュメントイベント処理に関するReferenceError

アイテムの水平スクロールカルーセルにキーボードナビゲーションを提供するReact.jsアプリケーションで作業しています。現在のバージョンでは、ナビゲーションには左右の矢印のみが使用され、選択するには入力します。私はコンテナにリスナーをマウントしています：ReactJSサーバー側レンダリングでのドキュメントイベント処理に関するReferenceError

const App = React.createClass({ 

    componentWillMount() { 
    document.addEventListener("keydown", this.__onKeyDown); 
    }, 

    __onKeyDown(event){ 
    ... 
    }, 

    render: function() { 
    const items = [] 
    Array(10).fill().map((_, i) => items.push(<MovieItem /> 
    return (
     <div className="scroller"> 
      {items} 
     </div> 
    ) 
    } 
});

上記のコードは、サーバー側にしようとするまで期待通りに動作します。私は私のサーバーの設定ファイルに次のルートを追加しました：にReferenceError文書は

import { Server } from 'http'; 
import express from 'express'; 
import routes from '../routes'; 

var app = express(); 

app.get('*', (req, res) => { 
    match(
     { routes, location: req.url }, 
     (err, redirectLocation, renderProps) => { 

      let markup; 
      if (renderProps) { 
       markup = renderToString(
        <Provider store={store}> 
         <RouterContext {...renderProps}/> 
        </Provider> 
       ); 
      } 
      return res.render('index', { markup }); 
     } 
    ); 
});

が定義されていないエラーが起こっている理由は私には明らかであり、その文書には、サーバー上で利用できません。しかし、それに対処する適切な方法は何ですか？

私は既にカルーセルを包み込んでdivのonkeydownを聞くdivにtabindexを追加しようとしましたが、divがフォーカスされているときに動作します。

出典

2017-03-28 André Teixeira

代わりにのみ、クライアント上で実行 'componentWillMount'、使用' componentDidMount'にイベントリスナーを追加します。 – ashu