从另一个文件连接 reactjs 组件

IT技术 ruby-on-rails coffeescript reactjs
2021-05-09 01:51:19

我从 Rails 和 React 开发测试项目。

我有来自react的根组件:

# chat_app.js.jsx.coffee
###* @jsx React.DOM ###
@ChatApp = React.createClass

displayName: 'chatApp'

render: ->

    return (
        `<div className="chatApp">
            <h1>React Chat App Example</h1>
            <div class="row">
                <div><MessageList /></div>
            </div>
        </div>`
        )

React.renderComponent(
  window.ChatApp(null),
  document.getElementById('chatApp')
)

我还有另一个组件:

# message_list.js.jsx.coffee
###* @jsx React.DOM ###
@MessageList = React.createClass

    displayName: 'messageList'

    render: ->
        return (
            `<div className="messageList">
                qwe
            </div>`
            )

但在浏览器中我有:未捕获的 ReferenceError: MessageList is not defined

如何将 MessageList 连接到 ChatApp?

1个回答

使用 Rails,您可以将所有 JSX 文件放在一个components文件夹中app/assets/javascripts并创建另一个文件,app/assets/javascripts/components.js使用:

//= require_tree ./components

确保您的application.js文件具有//= require_tree .(或添加//= require components)并且您将拥有:

  • 从默认 javascript 中为您加载的所有组件在您的应用程序布局中包含标签
  • 在提供页面之前在服务器上预渲染组件的可能性

我刚刚在这篇博文中详细描述了这个过程:Isomorphic React app with Ruby on Rails