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!');
});
助けてくれませんか、どこに問題がありますか? ありがとうございました