React和Browserify寄存器组件错误

React and Browserify Register Component Error

本文关键字：组件 错误 寄存器 Browserify React      更新时间：2023-09-26

我同时使用browserfy、gull和reactjs，

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

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

`注册.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。有什么想法吗？

当我进行如下自定义路由时，这是固定的；

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);
}
相关文章：