反应并浏览器注册组件错误 [英] React and Browserify Register Component Error

问题描述

我正在同时使用browserify，gulp和reactjs，

I am using browserify, gulp and reactjs together,

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

I have the following app.js contains my other scripts;

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

`Signup.js``

`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

我希望这些模块准备就绪

I want those modules to be ready according to their dom elements for different templates which i am both including app.js,

，但是我有无效的违规注册组件 目标容器不是DOM元素。错误，因为Login Modal在DOM上找不到注册ID。有任何想法吗？

But I am having Invalid Violation Register Component Target container is not a DOM element. error because Login Modal can not find signup id on DOM. Any ideas?

推荐答案

当我进行如下自定义路由时，此问题已解决。

This is fixed, when i made a custom routing like below;

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);
}

这篇关于反应并浏览器注册组件错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！