3

React とサーバー レンダリングでDraft.jsを使用したいと考えています。問題は、コンポーネントが完全にレンダリングされていないことです。そのため、オブジェクト インスペクターでは div 要素を確認できますが、ページは空で、テキスト入力などはありません。

これは私のコンポーネントコードです:

import React from 'react';
import {Editor, EditorState} from 'draft-js';

export class RichText extends React.Component {
  constructor() {    
    super();
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    return React.createElement(Editor, {
      editorState: this.state.editorState,
      onChange: this.onChange
    });        
  }
}

そしてサーバーテストファイル:

var express = require("express");
import * as path from "path";

var React = require('react');
var ReactDOMServer = require('react-dom/server');

import {RichText} from "../src/components/richtext/api/richtext-api";

var app = express();

//register view engine
app.set('views', path.join(__dirname, "./views"));
app.set('view engine', 'vash');

app.get('/', function (req, res, next) {  

  var richTexteditor = new RichText();

  var component = ReactDOMServer.renderToString(richTexteditor.render());

  res.render('index', {component: component});
});

app.use(express.static(path.join(__dirname, "./wwwroot")));

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

助けてくれませんか、どこに問題がありますか? ありがとうございました

4

0 に答える 0