我正在使用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。有任何想法吗?
答案 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);
}