React.js 输出到 jsc：ReferenceError: <component> is not defined

Posted 2023-02-21

【中文标题】React.js 输出到 jsc：ReferenceError: <component> is not defined

【英文标题】：React.js outputs to the jsc: ReferenceError: <component> is not defined

【发布时间】：2014-04-03 13:10:16

【问题描述】：

我在 Rails 项目中使用 react-rails gem。虽然javascript 和jsx 始终如一地工作，但我的coffeescript 文件似乎从来没有工作过。请注意，我正在尝试使用纯 coffeescript 解决方案，没有插值 jsx。

在我的coffeescript 文件中（其扩展名为*.js.coffee）

div = React.DOM

Hello = React.createClass
  render: ->
    (div , ['Hello ' + @props.name])

在我看来：

= react_component 'Hello', name: 'World'

这是我在控制台中经常遇到的错误：

ReferenceError: Hello is not defined

【参考方案1】：

取自我的 GitHub issue 在 react-rails 存储库中，jakubmal 回答：

CoffeeScript 创建一个闭包，它可能看起来像：

(function() 
  var div, hello;

  div = React.DOM.div;

  Hello = React.createClass(
    render: function() 
      return div(, ['Hello ' + this.props.name]);
    
  );
).call(this);

使Hello 在关闭之外无法访问。

您可以将Hello 分配给如下窗口：

window.Hello = React.createClass

或使用快捷方式/技巧：

@Hello = React.createClass

为了保持您的应用结构整洁，您需要至少应用一个 命名空间模式在这里。 http://addyosmani.com/blog/essential-js-namespacing/

此外，在react-rails google 群组中，Paul O'Shannessy 写道：

帮助器非常天真，并希望您的组件可以作为全局变量使用。 Coffeescript 在它们被链轮连接之前将每个文件包装在一个闭包中，这违反了全局假设。这是在开发过程中出现的，但我们认为对某些人来说，有东西总比没有好。