ReactServer # RenderToString wird nicht korrekt gerendert

Question

Ich versuche serverseitige Rendering mit React-Komponenten in Express und Templating mit Jade zu erreichen. Ich stoße jedoch auf einige Probleme.

Hier ist mein Server-Code, der Einstiegspunkt.

var app = require('express')(); 
var http = require('http').Server(app); 
var React = require('react'); 
var ReactDOMServer = require('react-dom/server'); 

//Component 
var Index = require('./views/components/index.jsx').default; 

app.set('port', process.env.PORT || 3000); 
app.set('views', `${__dirname}/views`); 
app.set('view engine', 'jade'); 

app.get('/', (req, res) => { 
    var reactHTML = ReactDOMServer.renderToString(<Index/>); 
    res.render('test', { reactHTML: reactHTML }); 
}); 

http.listen(3000,() => { 
    console.log(`listening on port ${app.get('port')}`); 
}); 

Hier ist meine Index Komponente, es ist eigentlich nur ein div mit meiner ChatTextBox Komponente Rendering, die dies:

import React, { Component } from 'React'; 

class ChatTextBox extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { term: 'test' }; 
    this.termChange = this.termChange.bind(this); 
    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick(event) { 
    console.log('this was clicked'); 
    this.setState({ term: '' }); 
    } 

    termChange(event) { 
    console.log(event.target.value); 
    this.setState({ term: event.target.value }); 
    } 

    render() { 
    return (
     <div> 
     <input type="text" 
     value={this.state.term} 
     onChange={this.termChange} /> 
     <button onClick={this.handleClick}>Send Message</button> 
     <div>{this.state.term}</div> 
     </div> 
    ); 
    } 
} 

export default ChatTextBox; 

edit:

Hier ist meine Jade-Vorlage, test.jade

html 
    body 
    div#container 
     #{reactHTML} 

Probleme: 1) Es wird nicht richtig gerendert. Hier ist das Ergebnis:

Es ist die Wiedergabe der Komponente zweimal, zusammen mit den '<', '>' Symbole ..?

2) Keiner der Hooks funktioniert, in Bezug auf Bindungsstatus und Rendering dynamisch. Das macht aber Sinn, ich rendere statisches HTML in Jade. Wie würde ich das dynamisch erreichen? (Ich denke, das ist ein bisschen abseits von Thema, ich kann eine separate Sorge dafür machen).

Vielen Dank für das Lesen, hoffentlich war dieser Beitrag klar genug.

Answer 1

Es sieht so aus, als ob Sie Jade möglicherweise redundant verwenden. Der übliche Ansatz mit der Server-Seite von reactDOM besteht darin, das Ergebnis von renderToString() an den Client zu senden. Wenn Sie tun müssen weiterhin Jade aus irgendeinem Grund verwenden, können Sie es zu Unescape HTML-Zeichenfolgen mit != sagen. So können Sie Ihre Vorlage ändern:

html 
    body 
    div#container 
    #{!=reactHTML} 

sollte sicherstellen, dass es nicht doppelt machen alles