反应轨道：在选项哈希中带有 { 预渲染：true } 的组件给出 V8：ErroR语言 意外的令牌<

Question

我在一个项目中使用react-rails宝石。

每当我将prerender: true选项传递给react_component助手方法的选项哈希时，我得到错误:V8::Error - Unexpected token <。当我从选项哈希中删除prerender: true时，我的组件工作正常。

Gemfile:

gem 'rails', '4.1.1'
gem 'execjs'
gem 'therubyracer', platforms: :ruby
gem 'react-rails', github: 'reactjs/react-rails'

视图:

= react_component("AssignmentWindowProgressBar", { assignment: @assignment_json }, { prerender: true })

咖啡文件:

###* @jsx React.DOM ###
@AssignmentWindowProgressBar = React.createClass
  render: ->
    `<div>Hi world.</div>`
# this is located in this file:
# ./apps/assets/javascripts/components/assignments/AssignmentWindows.js.jsx.coffee

堆栈跟踪:

V8::Error - Unexpected token < at <eval>:19037:15:
  therubyracer (0.12.1) lib/v8/error.rb:86:in `block in try'
  therubyracer (0.12.1) lib/v8/error.rb:83:in `try'
  therubyracer (0.12.1) lib/v8/context.rb:95:in `block in eval'
  therubyracer (0.12.1) lib/v8/context.rb:248:in `block (2 levels) in lock_scope_and_enter'
  therubyracer (0.12.1) lib/v8/context.rb:245:in `block in lock_scope_and_enter'
  therubyracer (0.12.1) lib/v8/context.rb:244:in `lock_scope_and_enter'
  therubyracer (0.12.1) lib/v8/context.rb:204:in `enter'
  therubyracer (0.12.1) lib/v8/context.rb:94:in `eval'
  execjs (2.2.0) lib/execjs/ruby_racer_runtime.rb:11:in `block in initialize'
  execjs (2.2.0) lib/execjs/ruby_racer_runtime.rb:78:in `block in lock'
  execjs (2.2.0) lib/execjs/ruby_racer_runtime.rb:76:in `lock'
  execjs (2.2.0) lib/execjs/ruby_racer_runtime.rb:9:in `initialize'
  execjs (2.2.0) lib/execjs/runtime.rb:44:in `compile'
  execjs (2.2.0) lib/execjs/module.rb:27:in `compile'
  ... end of execjs errors ...

谢谢大家的帮助!

Answer 1

从https://github.com/reactjs/react-rails#jsx复制答案

要将JSX转换为JS，只需创建. JS。jsx文件。这些文件将根据请求进行转换，或作为组件的一部分进行预编译资产:预编译任务。

CoffeeScript文件也可以通过创建.js.jsx来使用。咖啡的文件。我们还需要将JSX嵌入到反引号中，这样CoffeeScript就会忽略它不理解语法。下面是一个例子:

Component = React.createClass
  render: ->
    `<ExampleComponent videos={this.props.videos} />`

注意文件扩展名