将参数从 pug 传递到 JSX

Question

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

我的路线在传递user_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 参数。

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

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

Answer 1

你可以使用window对象

假设在您的.pug 文件中

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

现在您可以在react 组件中以window.userId 的身份访问userId

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