0
私はexpress.jsとreact.jsを小さなテストに使います。以下は、私は、コードを反応さ：ボタンがクリックされたときに同形ReactJS - サーバー側とクライアント側の両方でコードを共有する方法は？
ビュー/ Todo.jsx、
var React = require('react');
var TodoApp = React.createClass({
getInitialState: function() {
return {
counter: 0
};
},
increment: function() {
this.setState({ counter: this.state.counter+1 });
},
render: function() {
return (<div>
<div>{this.state.counter}</div>
<button onClick={this.increment}>Increment!</button>
</div>);
}
});
module.exports = TodoApp;
しかしcounterが増加されることはありません。 increment関数が呼び出されたことはありません。
なぜですか？私は何を間違えたのですか？
EDIT：
私のブラウザでHTML出力：
<html><head></head>
<body><div class="container">
<div>0</div>
<button>Increment!</button>
</div>
</body>
</html>
あなたがすべてでHTMLヘッダーにはjsファイルが存在しないことを見ることができるように。それはこれのbecosですか？私は、サーバー側のreact.jsでHTMLをレンダリングします。
app.js
var express = require('express');
var reactViews = require('express-react-views');
var app = express();
// View engine setup.
app.set('views', __dirname + '/views');
app.set('view engine', 'jsx');
app.engine('jsx', reactViews.createEngine());
// Set root.
app.use(express.static(__dirname + '/views'));
// Get routes.
var todo = require('./routes/todo');
// Respond with "todo" app on the todo page.
app.use('/todo', todo);
var server = app.listen(3000, function() {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://%s:%s', host, port);
});
ルート/ router.js
var express = require('express');
var router = express.Router();
router.get('/', function (request, response) {
response.render('Todo', {}); // 'Todo' is 'views/Todo.jsx'
});
module.exports = router;
私は問題が反応するが、クライアント側とサーバ側との間で共有されていないと思います。現在はサーバー側でのみ動作します。どのようにして私はそれを共有し、クライアント側でも同様に動作させることができますか？
アイデア？
だけで（この<ボタンのonClick = {this.increment.bindにこれをあなたのボタンを変更するにする必要があり、以下のフィドルをチェックし、それが正常に動作していると思います）}>インクリメント！ – Amit
私のコードには何か問題があると思います。私の上記の編集をご覧ください。 – laukok
はい、そうです！この例を参照してくださいhttps://github.com/mhart/react-server-example – Anonymous0day