Passing variable from jade file to React component
I am having trouble passing a variable from a .jade file to a react component. Here is a section of my jade file:
block content
#example
var user = '#{user}';
span #{user.id}
span #{user.displayName}
And here is app.jsx, the react component that would like to access the user of the variable.
var React = require('react');
var HelloWorld = require('./HelloWorld.jsx');
var $ = jQuery = require('../../libraries/jquery/dist/jquery');
var bootstrap = require('../../libraries/bootstrap-sass-official/assets/javascripts/bootstrap');
React.render(
<HelloWorld/>,
document.getElementById('example')
);
I've tried logging this.props.user
and window.user
on console from app.jsx, but it's undefined. Ideally I would like this.props.user
app.jsx to be the user that the jade file has access to. Then I could pass this custom variable to the HelloWorld component for example. There is perhaps a better way to do it and I, being new to jade and responsiveness, would undoubtedly appreciate this advice.
source to share
I haven't used React, I'm not sure what React.render does or its arguments, so this might not be applicable.
To get a variable from server to client javascript try json string template in html and load from javascript. EJS handles the quote by escaping and I think Jade does too. For reference, content!= safeString
says Jade to skip escaping, so content !{safeString}
.
- var user={id:1, displayName:'foo'}
#example
meta(data-userJSON=JSON.stringify(user))
script(src="//code.jquery.com/jquery-1.11.3.min.js")
script.
var user = JSON.parse(
$('#example meta').attr('data-userJSON')
)
console.log(user);
span #{user.id}
span #{user.displayName}
source to share
You can extract DOM attributes manually before rendering, for example:
var node = document.getElementById('example')
var user = {
id: node.children[0].textContent,
displayName: node.children[1].textContent
}
React.render(<HelloWorld user={user} />, node)
But I would suggest that you are using JSON or ajax to fetch data instead of parsing the DOM.
source to share
Try this answer (I tried to add a comment, but it won't let me).
In your jade you will have:
script.
var user = (!{JSON.stringify(user)});
Then in React:
React.render(
<HelloWorld user={user} />,
document.getElementById('example')
);
Be careful about passing data in a client you don't want to see.
source to share
Copying my answer from a similar question:
"There is a library that works well with an expression (and any other node rendering view) called react-helper ( https://github.com/tswayne/react-helper ). It pretty much handles everything you need to render react components in your view and pass data from server in any node structure.you just create an entry point (js file) for webpack (lib has cli that can generate your webpack config for you) and add a line to your controller and view and your component will appear on this page Passing data to your react components is very simple:
const component = reactHelper.renderComponent('MyComponent', {user:
req.session.user || ''})
res.render('view-to-render', {component})
There is also a common react-helper middleware ( https://github.com/tswayne/express-react-helper ) that allows you to add context that is accessible to all views, which is handy for user session data.
app.use(function(req, res, next) {
req.reactHelperContext.user = req.session.user || '';
});
Then all of your react components will have a custom prop without having to manually add this logic to every controller action.
The library will render your component for you and store it in a variable that you can pass to jade and then in jade you just print the variable like you would a string. This will handle React.render for you, so you won't need this in your view or even an example div anymore. Your entry point will simply "register" the HelloWorld component, and you're good to go.
source to share
Simple way to accept accepted answer:
- Convert pug variable to json object
file.pug
script.
var data = !{JSON.stringify(variable)}
- Include variable in component
file.jsx
class App extends React.Component {
render() {
return (
<div>
<h1>It works {data.name} </h1>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("react-target"));
source to share