将参数从 pug 传递给 JSX

IT技术 node.js reactjs express pug react-jsx
2021-05-11 18:53:05

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

我的路由index.pug在传递user_id参数时呈现一个文件

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

然后我可以访问userId我的 pug 文件中的 ,如下所示:

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

现在我需要userIdindex.jsx包含 React 组件的文件中访问这个参数

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

但这不起作用,正如我所料。有任何想法吗?

1个回答

你可以使用window对象

让我们在你的.pug文件中

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

现在您可以userIdreact组件中访问window.userId

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