javascript 在 react.js 中渲染新元素 onClick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29799070/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Render new element onClick in react.js
提问by baao
I'm new to react and am trying to render a new element onClick:
我是新手，正在尝试在点击时呈现一个新元素：
var LoginButton = React.createClass({
..............
..............
clickHandle : function() {
this.rememberMe = {
active: localforage.getItem('rememberMe', function (err, key) {
return key;
})
};
if (this.rememberMe.active == true || this.rememberMe.active == 'checked')
{
document.getElementById('loginForm').submit();
}
else {
React.render(<wantToRemember />, document.getElementById('loginbuttonhere'));
}
return this.rememberMe.active;
},
This is the element that should appear:
这是应该出现的元素：
var wantToRemember = React.createClass({
getInitialState : function () {
return {
position: 'absolute',
display: 'block',
top: '20px',
width: '100px',
height: '100px'
}
},
render : function () {
return (
<div className="rememberPopup" style={this.state}>
<div className="row">
<div className="staylogin">
<div className="col-md-4">
<label for="checkbox">Angemeldet bleiben</label>
</div>
<div className="col-md-1">
<input type="checkbox" id="checkbox" name="remember" />
</div>
</div>
</div>
</div>
);
}
});
but it doesn't appear, instead react renders this html:
但它没有出现，而是反应呈现这个 html：
<wanttoremember data-reactid=".1"></wanttoremember>
I'm pretty sure I'm doing some pretty basic stuff wrong, but can't figure out what. Isn't it possible to call different elements like this?
我很确定我做错了一些非常基本的事情，但无法弄清楚是什么。难道不能像这样调用不同的元素吗？
回答by Cristik
Your react.jscomponent name begins with a lower-case letter, it should start with an upper-case leter: var WantToRemember = React.createClass(...)and React.render(<WantToRemember />,....
您的react.js组件名称以小写字母开头，应该以大写字母开头：var WantToRemember = React.createClass(...)和React.render(<WantToRemember />,...。
The JSX compiler requires for component names to begin with an upper-case letter (see jsx docs on this):
JSX 编译器要求组件名称以大写字母开头（请参阅jsx 文档）：
To render a React Component, just create a local variable that starts with an upper-case letter:
要渲染 React 组件，只需创建一个以大写字母开头的局部变量：
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.getElementById('example'));
回答by James Waddington
You should pass a React element to React.render instead of the tag itself, something like this:
您应该将 React 元素传递给 React.render 而不是标签本身，如下所示：
React.render(
React.createElement(wantToRemember)
);
