React Draft.js服务器端呈现

时间:2016-07-27 19:27:18

标签: javascript express reactjs draftjs

我想将 Draft.js 与React和服务器渲染一起使用。问题是,组件是整体渲染的。所以,在对象检查器中我可以看到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!');
});
你能帮助我,问题出在哪里? 谢谢

0 个答案:

没有答案