Javascript 在react.js中呈现新元素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;

    },

var LoginButton=React.createClass({
..............
..............
clickHandle:function（）{
this.rememberMe={
活动：localfollow.getItem（'rememberMe'，函数（err，key）{
返回键；
})
};
如果（this.rememberMe.active==true | | this.rememberMe.active=='checked'）
{
document.getElementById（'loginForm'）.submit（）；
}
否则{
React.render（，document.getElementById（'loginbuttonhere'）；
}
返回this.rememberMe.active；
},

这是应显示的元素：

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

var wanttomemory=React.createClass({
getInitialState:函数（）{
返回{
位置：'绝对'，
显示：“块”，
顶部：“20px”，
宽度：“100px”，
高度：“100px”
}
},
渲染：函数（）{
返回(
布莱本酒店
);
}
});

但它不会出现，而是呈现以下html：

<wanttoremember data-reactid=".1"></wanttoremember>

---

我很确定我做了一些非常基本的错误，但不知道是什么。难道不能像这样调用不同的元素吗？

你应该传递一个React元素来React.render，而不是标记本身，类似这样：

React.render(
  React.createElement(wantToRemember)
);

---

您的

react.js

组件名称以小写字母开头，它应该以大写字母开头：

var wanttomemory=react.createClass（…）

和

react.render（，…

）

JSX编译器要求组件名称以大写字母开头（请参阅）：

要呈现React组件，只需创建以大写字母开头的局部变量：

var MyComponent=React.createClass（{/*…*/}）；
var myElement=；
render（myElement，document.getElementById（'example'）；

这个答案实际上是更正确的JSX行为和模式：

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.getElementById('example'));