pug에서 JSX로 매개 변수 전달

Express 및 React를 사용하여 게임을 제작 중입니다. 내 index.jsx 파일의 userId에 액세스하여 사용자 점수를 높이는 것과 같이 컨트롤러에서 작업을 수행해야합니다. 이 같은pug에서 JSX로 매개 변수 전달

//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

지금 나는이에 액세스 할 필요가 user_id PARAM을 통과하면서

내 경로는 index.pug 파일을 렌더링 userId param에 내 index.jsx 파일에있는 React Components가 들어 있습니다.

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

그러나 예상대로 작동하지 않습니다. 어떤 아이디어?

출처

2017-01-01 Antonin Archer

당신은 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> 
    ) 
    } 
    }

출처

2017-01-01 17:14:35

로 react 구성 요소에 userId에 액세스 할 수 있습니다 .pug 파일에 있다고 가정 해 봅시다 'window' 객체는'pug' 데이터를'react' 컴포넌트에 전달합니다. –

고마워요! 그게 사실입니다. 여기 구현 방법은 다음과 같습니다 : '''index.pug 스크립트. window.fbId =! {JSON.stringify (userId)}; index.jsx에서 다음 ''' : 가'''ReactDOM.render ( <게임 userId를 = {userId를} />, document.getElementById를 ('루트') 가)''' –

오 당신이'에 전달 렌더링 '기능을 제공합니다. 그건 괜찮아. –

pug에서 JSX로 매개 변수 전달

답변

관련 문제