Isomorphe ReactJS - wie Code für Server-Seite und Client-Seite zu teilen?

Ich benutze express.js und react.js für einen kleinen Test. Unten ist mein reagieren Code:Isomorphe ReactJS - wie Code für Server-Seite und Client-Seite zu teilen?

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

Aber die counter erhöht nie, wenn die Schaltfläche geklickt wird. Die increment Funktion wurde nie aufgerufen.

Warum? Was habe ich falsch gemacht?

EDIT:

Die HTML-Ausgabe in meinem Browser:

<html><head></head> 
    <body><div class="container"> 
     <div>0</div> 
     <button>Increment!</button> 
    </div> 
    </body> 
</html>

Wie Sie sehen können, dass es überhaupt keine js im HTML-Header ist. Liegt es daran? Ich rendere den HTML mit react.js auf der Serverseite.

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); 
});

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

Ich denke, das Problem ist die Reaktion ist nicht zwischen Client-Seite geteilt und der Server-Seite. Derzeit funktioniert es nur auf der Serverseite. Wie und was kann ich tun, damit es geteilt wird und es auch auf der Client-Seite funktioniert?

Irgendwelche Ideen?

Quelle

2016-04-12 laukok

nur Ihre Taste Mit dieser Taste ändern – Amit

Ich denke, dass etwas mit meinem Code nicht stimmt. Bitte sehen Sie meine Bearbeitung oben. – laukok

Ja, hast du recht! In diesem Beispiel https://github.com/mhart/react-server-example – Anonymous0day

Ich denke, es arbeitet daran, die unter Geige

[https://jsfiddle.net/56ppsy4v/][1]

Quelle

2016-04-12 07:14:31 Amit

Ich habe keine 'ReactDOM.render ( , document.getElementById ('container') ); 'bcos rendere ich das HTML mit reagieren auf der Serverseite. Bitte sehen Sie meine Bearbeitung oben. – laukok

<button onClick={this.increment}>Increment!</button>

fein überprüfen Sollte

<button onClick={this.increment.bind(this)}>Increment!</button>

Quelle

2016-04-12 07:15:56

Isomorphe ReactJS - wie Code für Server-Seite und Client-Seite zu teilen?

Antwort

Verwandte Themen