RickWong/react-isomorphic-starterkit

How can I pass data from Component to html template

jingcleovil opened this issue · 2 comments

jingcleovil commented

My goal is to declare CSS external path in my component and pass it to the html content.

Goal:
<link href="${reactData.cssPath}" rel="stylesheet" />

Transmit render to string

Transmit.renderToString(RoutingContext, renderProps).then(({reactString, reactData}) => {

                let template = (
                        `<!doctype html>
                    <html lang="en-us">
                        <head>
                            <meta charset="utf-8">
                            <title>react-isomorphic-starterkit</title>
                            <link rel="shortcut icon" href="/favicon.ico">
                             <link href="${reactData.cssPath}" rel="stylesheet" />
                        </head>
                        <body>
                            <div id="react-root">${reactString}</div>
                        </body>
                    </html>`
                );

                this.type = "text/html";
                this.body = Transmit.injectIntoMarkup(template, reactData, [`${webserver}/dist/client.js`]);

                callback(null);
            });

Is it posible?

RickWong commented

Is there a reason you need to put it in reactData? Can't you set cssPath elsewhere and use it directly in the template?

jingcleovil commented

My idea is on every set of components I have different CSS. Say Profile have specific CSS that I don't want to load with the other Pages.

Anyways, I will try your suggestion and make a config and map it depending on the URL.