0

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コンポーネントです。実際には、私のコンポーネントで div をレンダリングしているだけChatTextBoxです。これは次のとおりです。

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回レンダリングしています..？

2) バインディング状態と動的レンダリングに関して、どのフックも機能しません。これは理にかなっていますが、静的な HTML を jade でレンダリングしています。では、これを動的に達成するにはどうすればよいでしょうか。（これは少し話題から外れていると思います。これについては別の懸念を抱くことができます）。

読んでくれてありがとう、うまくいけば、この投稿は十分に明確でした.

4

1 に答える 1

0

Jade を潜在的に冗長に使用しているようです。反応DOMサーバー側での通常のアプローチは、renderToString()ダウンの結果をクライアントに送信することです。なんらかの理由で Jade を使い続ける必要がある場合は!=、 . したがって、テンプレートを次のように変更できます。

html
  body
  div#container
   #{!=reactHTML}

これにより、すべてが二重レンダリングされないようにする必要があります

于 2016-03-30T01:14:56.147 に答える