ReactServer#RenderToString 无法正确呈现

Question

我正在尝试使用 Express 中的 React 组件完成服务器端渲染并使用 Jade 进行模板化。但是我运行遇到了一些问题。

这是我的服务器代码，入口点。

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

这是我的 Index 组件，它实际上只是用我的 ChatTextBox 组件渲染一个 div，它是这样的：

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;

编辑：

这是我的玉模板，test.jade

html
  body
    div#container
      #{reactHTML}

问题： 1）它没有正确渲染。这是结果：

它渲染组件两次，连同“<”、“>”符号..?

2) None 的挂钩在绑定状态和动态呈现方面有效。不过这是有道理的，我在 jade 中渲染静态 HTML。那么我将如何动态地完成这个呢？（我觉得有点跑题了，可以单独关注一下）

感谢您的阅读，希望这篇 post 已经足够清楚了。

Answer 1

您似乎在重复使用 Jade。 reactDOM 服务器端的常用方法是将 renderToString() 的结果发送到客户端。如果你出于任何原因需要继续使用 Jade，你可以告诉它用 != 取消转义 HTML 字符串。因此，您可以将模板更改为：

html
  body
  div#container
   #{!=reactHTML}

这应该确保它不会双重渲染所有内容

ReactServer#RenderToString 无法正确呈现

ReactServer#RenderToString not rendering correctly

serverside-javascript

reactjs

react-dom