2

Koaに、react-routerから受け取ったhtml文字列を同形でレンダリングさせようとしています。

これが私が機能させようとしてきたコードです：

サーバー.js

import koa from 'koa';
import React from "react";
import Router from "react-router";
import routes from "./routes";
const server = koa();
const port = process.env.NODE_ENV || 8000;

server.use(function *() {
    try {
        yield Router.run(routes, this.request.url, function (Handler) {
            var content = React.renderToString(<Handler/>)
            this.body = content
        })
    }
    catch (err) {
        this.status = err.status || 500;
        this.body = err.message;
        this.app.emit('error', err, this);
    }
 })

server.listen(port, function(err) {
  if (err) throw err;
  console.log("Server running on: http://localhost:"+port)
})

ルート.js

import React from "react"
import {Route, DefaultRoute} from "react-router"
import Main from "./components/main"


export default (
  <Route path="/">
    <DefaultRoute handler={Main} name="main" />
  </Route>
)

main.js

import React from "react"

const Main = React.createFactory(React.createClass ({
  render () {
    return (
      <div>HELLO</div>
    )
  }
}))

export default Main

いくつかのエラーが発生します:

警告: コンポーネント(...):render返されたコンポーネント インスタンスにメソッドが見つかりません: コンポーネントで定義するのを忘れたrenderか、型が React コンポーネントではない関数である要素を誤ってレンダリングしようとした可能性があります。

警告: React 要素の props プロパティを設定しないでください。代わりに、要素を最初に作成するときに正しい値を指定してください。

TypeError: プロパティ コンテキストを追加できません。オブジェクトは拡張可能ではありません

警告: 何かが React コンポーネントを直接呼び出しています。代わりにファクトリまたは JSX を使用してください。参照: https://fb.me/react-legacyfactory

4

2 に答える 2

3

これで答えが必要な人のために、これがあなたたちを助けることを願っています.

サーバー.js

import koa from 'koa';
import React from "react";
import Router from "react-router";
import routes from "./routes";
const server = koa();

let handler;

server.use(function *(next) {
  Router.run(routes, this.request.url, (Handler) => {
    handler = React.renderToString(<Handler/>);
  });
  yield next;
});

server.use(function *() {
  this.body = handler;
});

export default server;

コンポーネント/index.js

import React from "react";

const Main = React.createClass ({
  render () {
    return (
      <div>HELLO</div>
    );
  }
});

export default Main;

この工場を作成する必要はありません。

于 2015-07-07T08:48:56.443 に答える