从另一个文件连接reactjs组件 [英] Connect reactjs component from another file

问题描述

我从Rails和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>`
）
  
 
 
我如何可以将MessageList连接到ChatApp？
解决方案
使用Rails，您可以将所有JSX文件放在  app / assets / javascripts 中的文件夹，并创建另一个文件 app / assets / javascripts / components.js 与：
  // = require_tree ./components 
  pre> 
 
 
确保您的 application.js 文件具有 // = require_tree。 code>（或添加 // = require components ），您将拥有：
 
 
 
 $ b $  
 
在提供网页之前在服务器上预呈现您的组件的可能性
 > 
 
 
 
 
我刚刚在这篇博文中详细描述了过程： Isomorphic React应用程序
 with Ruby on Rails  
 
I develop test project from Rails and React.

I have root component from 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')
)
and I have another component:
# message_list.js.jsx.coffee
###* @jsx React.DOM ###
@MessageList = React.createClass

    displayName: 'messageList'

    render: ->
        return (
            `<div className="messageList">
                qwe
            </div>`
            )
But in browser I have: Uncaught ReferenceError: MessageList is not defined

How I can connect MessageList to ChatApp?
解决方案
Using Rails, you can have all your JSX files in a components folder inside app/assets/javascripts and create another file, app/assets/javascripts/components.js with:
//= require_tree ./components
Make sure your application.js file has //= require_tree . (or add //= require components) and you will have:


all your components loaded for you from within the default javascript include tag in your application layout
the possibility to pre-render your components on the server before serving a page


I've just described the process in details in this blog post: Isomorphic React app
with Ruby on Rails

                        
这篇关于从另一个文件连接reactjs组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！