pugからJSXへのパラメータを渡す

Question

私はExpressとReactを使ってゲームを構築しています。ユーザのスコアを増やすなど、私のコントローラ上でアクションを実行するには、index.jsxファイルのuserIdにアクセスする必要があります。

私のルートはuser_idのparamを通過する間index.pugファイルをレンダリング：

//server.js 
app.get('/', function (req, res) { 
    const userId = req.query.userId 
    res.render('index', {userId: userId}) 
}) 

それから私はこのように、私のパグファイルにuserIdにアクセスすることができます。

// index.pug 
body 
    div#errors 
    #root 
    p #{userId} // prints the User Id 

今、私はこれにアクセスする必要がありますuserId param in index.jsxファイルには、Reactコンポーネントが含まれています。

class Cell extends React.Component { 
    render() { 
     return (
     <button onClick={() => this.props.onClick()}> 
      {userId} 
     </button> 
    ) 
    } 
    }  

しかし、これは期待通りに機能しません。何か案は？

Answer 1

あなたはwindowオブジェクトを使用して行うことができます

はのは

script. 
    var userId = '#{userId}'; //assigning pug value to window object. 

は今、あなたは、私が使用してこの同じようにやったwindow.userId

class Cell extends React.Component { 
    render() { 
     return (
     <button onClick={() => this.props.onClick()}> 
      {window.userId} 
     </button> 
    ) 
    } 
    }