質問内容)
index.htmlを使う場合、サーバーサイドからどのようにして
renderのオブジェクトリテラル変数を渡すのかを教えて下さい。
やりたい事)
express(node.jsのフレームワーク)からWebサーバーを起動
(nginx, apach使っていません)してユーザに応じてDBから
データを参照、index.html及びclassAにオブジェクトリテラル
をrenderする機能を実装したいと考えています。
背景)
res.renderから直接、classA.jsxにrenderすればよいと
考えましたが、.jsxですとjquery.lazyload.jsと
$(○○).lazyload()を使うjsファイルが連結されていない
が連結されず、lazyload is not definedと怒られてしまう
(.ejsでは正常動作しています)
或いは、import又は、requireで○○.jsからjquery.lazyload.js
をimportしようとすると今度は、require is not definedと
webpackのコンパイルが上手くいっていない状態(別issueで質問、回答待ち)
よって、index.htmlに<script・・・でjsの連結を実現しようと試みている
分からない事)
DBから取得したオブジェクトリテラルをサイトに反映する処理を今まで
.ejs等のテンプレートエンジンを使って実現してきたのですが、index.html
等の.htmlを使う場合、オブジェクトリテラルを反映させる方法が分からない。
ex. render ('classA', title:'タイトル');としてしまうとindex.html
の表示ができない
index.htmlコード)
<html> <head> <title>タイトル</title> </head> <body> <div id ='content'></div> <script src ='classA.js' ></script> </body> </html>
classA.jsxコード)
import React, {Component} from 'react'; export default class classA extends Component { constructor (props) { super (props); this.state = props; }; render () { return (<div>{this.props.title}</div>), document.getElementById ('content'); }; };
作業進捗)
サーバーサイドexpressのapp.js内の
res.render ('index', {title :'タイトル'});
からindex.ejsを表示させてきました。
これをReact.jsに書換えるため、テンプレートエンジンを
.ejsから.jsxに修正してindex.jsxとしてレンダーして
表示させてきた。
あなたの回答
tips
プレビュー