React和Browserify注册​​组件错误

时间:2015-03-22 19:16:22

标签: javascript reactjs browserify

我正在使用browserify,gulp和reactjs,

我有以下app.js包含我的其他脚本;

var React = window.React = require('react');
var Signup = require('./ui/Signup');
var Login = require('./ui/Login');

`Signup.js``

var React = require('react');
var signupNode = document.getElementById('signup');

var SignupApp = React.createClass({
render: function(){
    return (<Signup/>)
   }
});

var Signup = React.createClass({
    render: function(){
    return (
            <div>
                <div classNameName="form-block center-block">
                    <h2 classNameName="title">Üye Ol</h2>
                    <SignupForm/>
                </div>
            </div>
        )
   }
});

var SignupForm = React.createClass({
render: function(){
    return (<div className='form-horizontal'>
                hede
            </div>)
   }
});

React.renderComponent(<SignupApp/>, signupNode);
module.exports = Signup;

和Login.js

/** @jsx React.DOM */
var React = require('react');
var loginNode = document.getElementById("login");


var LoginApp = React.createClass({
    render: function(){
        return (<Login></Login>)
    }

});

var Login = React.createClass({
    render: function(){
        return (
                <div>
                    <div className="form-block center-block">
                        <h2 className="title">Giriş Yap</h2>
                        <LoginForm/>
                    </div>
                </div>
                            )
    }
});





var LoginForm = React.createClass({
    render: function(){
        return (<div className="form-horizontal">
                    hede
                </div>
        )
    }
});
React.renderComponent(<LoginApp/>, loginNode);

module.exports = Login

我希望这些模块根据不同模板的dom元素做好准备,我包括app.js,

但我遇到Invalid Violation Register Component Target container is not a DOM element.错误,因为登录模式无法在DOM上找到注册ID。有任何想法吗?

1 个答案:

答案 0 :(得分:0)

这是固定的,当我制作如下的自定义路由时;

if (window.location.pathname.indexOf('login') > -1) {
    React.renderComponent(<Login/>, loginNode);
}
if (window.location.pathname.indexOf('signup') > -1) {
    React.renderComponent(<Signup/>, signupNode);
}
if (window.location.pathname.indexOf('new_post') > -1) {
    React.renderComponent(<NewPost/>, newPostNode);
}
if (window.location.pathname.indexOf('home') > -1) {
    React.renderComponent(<Home/>, HomeNode);
}