Node.js 将参数从pug传递到JSX

我正在使用Express和React构建一个游戏。我需要访问我的

index.jsx

文件中的userId来对我的控制器执行操作，比如增加用户分数

我的路线在传递

用户id

参数时呈现

index.pug

文件：

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

然后我可以访问我的pug文件中的

userId

，如下所示：

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

现在，我需要访问包含React组件的

index.jsx

文件中的

userId

param

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

类单元格扩展React.Component{
render（）{
返回(
this.props.onClick（）}>
{userId}
)
} 
}    

---

但正如我所预料的那样，这不起作用。有什么想法吗？

您可以使用

窗口

对象

比如说在你的

.pug

文件中

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

现在您可以访问

react

组件中的

userId

作为

窗口。userId

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

类单元格扩展React.Component{
render（）{
返回(
this.props.onClick（）}>
{window.userId}
)
} 
} 

我使用

window

对象将

pug

数据传递给

react

组件，方法与此相同谢谢！确实是这样。我是这样实现的：

index.pug脚本。window.fbId=！{JSON.stringify（userId）}

然后在index.jsx中：

ReactDOM.render（，document.getElementById（'root'））

Oh您传递给了

render

函数。那也很好。