将parag从帕格传递给JSX

我正在使用Express和React构建游戏。我需要访问我的index.jsx文件中的userId以在我的控制器上执行操作，例如增加用户分数。将parag从帕格传递给JSX

我的路线呈现一个index.pug文件，同时通过一个user_id PARAM：

//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在我的index.jsx文件中包含React组件。

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

但是，这不起作用，正如我所料。有任何想法吗？

来源

2017-01-01 Antonin Archer

你可以使用window对象

让我们在.pug文件说

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

现在你可以在react组件访问userId为window.userId

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

来源

2017-01-01 17:14:35

我这样做是使用相同的方法'window'对象将'pug'数据传递给'react'组件 –

谢谢！确实如此。以下是我如何实现它： '''index.pug 脚本。 window.fbId =！{JSON.stringify（userId）}; ''' 然后在index.jsx： '''ReactDOM.render（ <游戏用户id = {} userId的/>，的document.getElementById（ '根'））''' –

喔你传递给'渲染“功能。这也很好。 –

将parag从帕格传递给JSX

回答

相关问题