我正在阅读本教程:http : //tylermcginnis.com/reactjs-tutorial-a- comprehensive-guide-to-building-apps-with- react/,在使用JVM渲染React时遇到问题纳斯霍恩。
我的App.js文件如下。在客户端上运行时,它可以正常工作。仅在使用Nashorn / JVM时给出错误:
var App = React.createClass({ getInitialState: function(){ return { name: 'Tyler McGinnis', friends: ['Jake Lingwall', 'Murphy Randall', 'Merrick Christensen'], } }, addFriend: function(friend){ this.setState({ friends: this.state.friends.concat([friend]) }); }, render: function(){ return ( <div> <h3> Name: {this.state.name} </h3> <AddFriend addNew={this.addFriend} /> <ShowList names={this.state.friends} /> </div> ) } }); var AddFriend = React.createClass({ getInitialState: function(){ return { newFriend: '' } }, updateNewFriend: function(e){ this.setState({ newFriend: e.target.value }); }, handleAddNew: function(){ this.props.addNew(this.state.newFriend); this.setState({ newFriend: '' }); }, render: function(){ return ( <div> <input type="text" value={this.state.newFriend} onChange={this.updateNewFriend} /> <button onClick={this.handleAddNew}> Add Friend </button> </div> ); } }); var ShowList = React.createClass({ render: function(){ var listItems = this.props.names.map(function(friend){ return <li> {friend} </li>; }); return ( <div> <h3> Friends </h3> <ul> {listItems} </ul> </div> ) } });
我的JVM代码:
ScriptEngine engine = new ScriptEngineManager(null).getEngineByName("nashorn"); String script = "var global = this;" + "console = {log: print, warn: print, error: print};"; engine.eval (script); // Evaluate React and the application code. engine.eval(new FileReader("target/web/web-modules/main/webjars/lib/react/react-with-addons.js")); engine.eval(new FileReader("target/web/public/main/javascripts/components/App.js")); html = engine.eval("React.renderToString(React.createElement(App));").toString();
运行此代码时,出现以下堆栈跟踪错误:
Warning: ReactDOMButton(...): No `render` method found on the returned component instance: you may have forgotten to define `render` in your component or you may have accidentally tried to render an element whose type is a function that isn't a React component. Warning: getInitialState was defined on ReactDOMButton, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead? javax.script.ScriptException: TypeError: null is not a function in <eval> at line number 7395 at jdk.nashorn.api.scripting.NashornScriptEngine.throwAsScriptException(NashornScriptEngine.java:586) at jdk.nashorn.api.scripting.NashornScriptEngine.evalImpl(NashornScriptEngine.java:570) at jdk.nashorn.api.scripting.NashornScriptEngine.evalImpl(NashornScriptEngine.java:525) at jdk.nashorn.api.scripting.NashornScriptEngine.evalImpl(NashornScriptEngine.java:521) at jdk.nashorn.api.scripting.NashornScriptEngine.eval(NashornScriptEngine.java:192) at javax.script.AbstractScriptEngine.eval(AbstractScriptEngine.java:264) at controllers.Application.index(Application.java:50) at Routes$$anonfun$routes$1$$anonfun$applyOrElse$1$$anonfun$apply$1.apply(routes_routing.scala:80) at Routes$$anonfun$routes$1$$anonfun$applyOrElse$1$$anonfun$apply$1.apply(routes_routing.scala:80) at play.core.Router$HandlerInvokerFactory$$anon$4.resultCall(Router.scala:264) at play.core.Router$HandlerInvokerFactory$JavaActionInvokerFactory$$anon$15$$anon$1.invocation(Router.scala:255) at play.core.j.JavaAction$$anon$1.call(JavaAction.scala:55) at play.core.j.JavaAction$$anonfun$11.apply(JavaAction.scala:82) at play.core.j.JavaAction$$anonfun$11.apply(JavaAction.scala:82) at scala.concurrent.impl.Future$PromiseCompletingRunnable.liftedTree1$1(Future.scala:24) at scala.concurrent.impl.Future$PromiseCompletingRunnable.run(Future.scala:24) at play.core.j.HttpExecutionContext$$anon$2.run(HttpExecutionContext.scala:40) at play.api.libs.iteratee.Execution$trampoline$.execute(Execution.scala:46) at play.core.j.HttpExecutionContext.execute(HttpExecutionContext.scala:32) at scala.concurrent.impl.Future$.apply(Future.scala:31) at scala.concurrent.Future$.apply(Future.scala:485) at play.core.j.JavaAction$class.apply(JavaAction.scala:82) at play.core.Router$HandlerInvokerFactory$JavaActionInvokerFactory$$anon$15$$anon$1.apply(Router.scala:252) at play.api.mvc.Action$$anonfun$apply$1$$anonfun$apply$4$$anonfun$apply$5.apply(Action.scala:130) at play.api.mvc.Action$$anonfun$apply$1$$anonfun$apply$4$$anonfun$apply$5.apply(Action.scala:130) at play.utils.Threads$.withContextClassLoader(Threads.scala:21) at play.api.mvc.Action$$anonfun$apply$1$$anonfun$apply$4.apply(Action.scala:129) at play.api.mvc.Action$$anonfun$apply$1$$anonfun$apply$4.apply(Action.scala:128) at scala.Option.map(Option.scala:145) at play.api.mvc.Action$$anonfun$apply$1.apply(Action.scala:128) at play.api.mvc.Action$$anonfun$apply$1.apply(Action.scala:121) at play.api.libs.iteratee.Iteratee$$anonfun$mapM$1.apply(Iteratee.scala:483) at play.api.libs.iteratee.Iteratee$$anonfun$mapM$1.apply(Iteratee.scala:483) at play.api.libs.iteratee.Iteratee$$anonfun$flatMapM$1.apply(Iteratee.scala:519) at play.api.libs.iteratee.Iteratee$$anonfun$flatMapM$1.apply(Iteratee.scala:519) at play.api.libs.iteratee.Iteratee$$anonfun$flatMap$1$$anonfun$apply$14.apply(Iteratee.scala:496) at play.api.libs.iteratee.Iteratee$$anonfun$flatMap$1$$anonfun$apply$14.apply(Iteratee.scala:496) at scala.concurrent.impl.Future$PromiseCompletingRunnable.liftedTree1$1(Future.scala:24) at scala.concurrent.impl.Future$PromiseCompletingRunnable.run(Future.scala:24) at akka.dispatch.TaskInvocation.run(AbstractDispatcher.scala:41) at akka.dispatch.ForkJoinExecutorConfigurator$AkkaForkJoinTask.exec(AbstractDispatcher.scala:393) at scala.concurrent.forkjoin.ForkJoinTask.doExec(ForkJoinTask.java:260) at scala.concurrent.forkjoin.ForkJoinPool$WorkQueue.runTask(ForkJoinPool.java:1339) at scala.concurrent.forkjoin.ForkJoinPool.runWorker(ForkJoinPool.java:1979) at scala.concurrent.forkjoin.ForkJoinWorkerThread.run(ForkJoinWorkerThread.java:107) Caused by: <eval>:7395 TypeError: null is not a function at jdk.nashorn.internal.runtime.ECMAErrors.error(ECMAErrors.java:58) at jdk.nashorn.internal.runtime.ECMAErrors.typeError(ECMAErrors.java:214) at jdk.nashorn.internal.runtime.ECMAErrors.typeError(ECMAErrors.java:186) at jdk.nashorn.internal.runtime.ECMAErrors.typeError(ECMAErrors.java:173) at jdk.nashorn.internal.runtime.linker.NashornBottomLinker.linkNull(NashornBottomLinker.java:176) at jdk.nashorn.internal.runtime.linker.NashornBottomLinker.getGuardedInvocation(NashornBottomLinker.java:66) at jdk.internal.dynalink.support.CompositeGuardingDynamicLinker.getGuardedInvocation(CompositeGuardingDynamicLinker.java:124) at jdk.internal.dynalink.support.LinkerServicesImpl.getGuardedInvocation(LinkerServicesImpl.java:144) at jdk.internal.dynalink.DynamicLinker.relink(DynamicLinker.java:232) at jdk.nashorn.internal.scripts.Script$\^eval\_$8.L:4-1$L:6628$L:7393(<eval>:7395) at jdk.nashorn.internal.scripts.Script$\^eval\_$8.L:4-1$L:6628$L:7412(<eval>:7421) at jdk.nashorn.internal.runtime.ScriptFunctionData.invoke(ScriptFunctionData.java:535) at jdk.nashorn.internal.runtime.ScriptFunction.invoke(ScriptFunction.java:209) at jdk.nashorn.internal.runtime.ScriptRuntime.apply(ScriptRuntime.java:378) at jdk.nashorn.internal.objects.NativeFunction.apply(NativeFunction.java:130) at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:13839$L:13899$L:13902(<eval>:13909) at jdk.nashorn.internal.scripts.Script$\^eval\_$8.L:4-1$L:6628$L:6750(<eval>:6855) at jdk.nashorn.internal.runtime.ScriptFunctionData.invoke(ScriptFunctionData.java:541) at jdk.nashorn.internal.runtime.ScriptFunction.invoke(ScriptFunction.java:209) at jdk.nashorn.internal.runtime.ScriptRuntime.apply(ScriptRuntime.java:378) at jdk.nashorn.internal.objects.NativeFunction.apply(NativeFunction.java:130) at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:13839$L:13899$L:13902(<eval>:13909) at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:14682$L:14719(<eval>:14720) at jdk.nashorn.internal.scripts.Script$\^eval\_$14.L:4-1$L:13161$L:13341(<eval>:13353) at jdk.nashorn.internal.scripts.Script$\^eval\_$9.L:4-1$L:7866$L:8127(<eval>:8153) at jdk.nashorn.internal.scripts.Script$\^eval\_$9.L:4-1$L:7866$L:8057(<eval>:8063) at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:14682$L:14719(<eval>:14720) at jdk.nashorn.internal.scripts.Script$\^eval\_$8.L:4-1$L:6628$L:6750(<eval>:6869) at jdk.nashorn.internal.runtime.ScriptFunctionData.invoke(ScriptFunctionData.java:541) at jdk.nashorn.internal.runtime.ScriptFunction.invoke(ScriptFunction.java:209) at jdk.nashorn.internal.runtime.ScriptRuntime.apply(ScriptRuntime.java:378) at jdk.nashorn.internal.objects.NativeFunction.apply(NativeFunction.java:130) at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:13839$L:13899$L:13902(<eval>:13909) at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:14682$L:14719(<eval>:14720) at jdk.nashorn.internal.scripts.Script$\^eval\_$8.L:4-1$L:6628$L:6750(<eval>:6869) at jdk.nashorn.internal.runtime.ScriptFunctionData.invoke(ScriptFunctionData.java:541) at jdk.nashorn.internal.runtime.ScriptFunction.invoke(ScriptFunction.java:209) at jdk.nashorn.internal.runtime.ScriptRuntime.apply(ScriptRuntime.java:378) at jdk.nashorn.internal.objects.NativeFunction.apply(NativeFunction.java:130) at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:13839$L:13899$L:13902(<eval>:13909) at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:14682$L:14719(<eval>:14720) at jdk.nashorn.internal.scripts.Script$\^eval\_$14.L:4-1$L:13161$L:13341(<eval>:13353) at jdk.nashorn.internal.scripts.Script$\^eval\_$9.L:4-1$L:7866$L:8127(<eval>:8153) at jdk.nashorn.internal.scripts.Script$\^eval\_$9.L:4-1$L:7866$L:8057(<eval>:8063) at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:14682$L:14719(<eval>:14720) at jdk.nashorn.internal.scripts.Script$\^eval\_$8.L:4-1$L:6628$L:6750(<eval>:6869) at jdk.nashorn.internal.runtime.ScriptFunctionData.invoke(ScriptFunctionData.java:541) at jdk.nashorn.internal.runtime.ScriptFunction.invoke(ScriptFunction.java:209) at jdk.nashorn.internal.runtime.ScriptRuntime.apply(ScriptRuntime.java:378) at jdk.nashorn.internal.objects.NativeFunction.apply(NativeFunction.java:130) at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:13839$L:13899$L:13902(<eval>:13909) at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:14682$L:14719(<eval>:14720) at jdk.nashorn.internal.scripts.Script$\^eval\_$8.L:4-1$L:6628$L:6750(<eval>:6869) at jdk.nashorn.internal.runtime.ScriptFunctionData.invoke(ScriptFunctionData.java:541) at jdk.nashorn.internal.runtime.ScriptFunction.invoke(ScriptFunction.java:209) at jdk.nashorn.internal.runtime.ScriptRuntime.apply(ScriptRuntime.java:378) at jdk.nashorn.internal.objects.NativeFunction.apply(NativeFunction.java:130) at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:13839$L:13899$L:13902(<eval>:13909) at jdk.nashorn.internal.scripts.Script$\^eval\_$16.L:4-1$L:14906$renderToString$L:14945(<eval>:14948) at jdk.nashorn.internal.runtime.ScriptFunctionData.invoke(ScriptFunctionData.java:535) at jdk.nashorn.internal.runtime.ScriptFunction.invoke(ScriptFunction.java:209) at jdk.nashorn.internal.runtime.ScriptRuntime.apply(ScriptRuntime.java:378) at jdk.nashorn.internal.objects.NativeFunction.call(NativeFunction.java:162) at jdk.nashorn.internal.scripts.Script$\^eval\_$19.L:4-1$L:18201$L:18319(<eval>:18335) at jdk.nashorn.internal.scripts.Script$\^eval\_$16.L:4-1$L:14906$renderToString(<eval>:14945) at jdk.nashorn.internal.scripts.Script$\^eval\_.runScript(<eval>:1) at jdk.nashorn.internal.runtime.ScriptFunctionData.invoke(ScriptFunctionData.java:535) at jdk.nashorn.internal.runtime.ScriptFunction.invoke(ScriptFunction.java:209) at jdk.nashorn.internal.runtime.ScriptRuntime.apply(ScriptRuntime.java:378) at jdk.nashorn.api.scripting.NashornScriptEngine.evalImpl(NashornScriptEngine.java:568) ... 43 more
如果我删除此行:
<button onClick={this.handleAddNew}> Add Friend </button>
从AddFriend渲染函数,然后错误消失。
编辑
如果我尝试通过执行以下操作来打印上面的button元素的结果:
function makeString(button){ var objStr = ''; for (var member in button) { objStr += (objStr ? ',\n': '')+ member + ':' + button[member] + ''; } return objStr; } var button = React.createElement("button", {onClick: this.handleAddNew}, " Add Friend ") var bs = makeString(button); bs += '\n\n*****_owner:\n\n'; bs += makeString(button['_owner']); bs += '\n\n*****_context:\n\n'; bs += makeString(button['_context']); bs += '\n\n*****_store:\n\n'; bs += makeString(button['_store']); bs += '\n\n*****props:\n\n'; bs += makeString(button['props']); console.log(bs);
我得到以下打印输出:http : //pastebin.com/raw.php?i=hEMkN8UP
来自这里的答案:https : //groups.google.com/forum/#!topic/play- framework/Oz8OC_fPdx8
“显然是8u25。使用最新版本的Nashorn的结果:在8u40中引发另一个异常;在8u60早期访问版本中完全可以正常工作。”
我验证了更新到8u60可以解决本地计算机上的问题。