在react.js中渲染新元素onClick [英] Render new element onClick in react.js

问题描述

我是新手做出反应并尝试在onClick上呈现一个新元素：

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;

    },

这是应该出现的元素：

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

但它没有出现，而是反应呈现这个html：

but it doesn't appear, instead react renders this 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?

推荐答案

你的 react.js 组件名称以小写字母开头，它应以大写字母开头： var WantToRemember = React.createClass（...）和 React.render（< WantToRemember />，... 。

Your react.js component name begins with a lower-case letter, it should start with an upper-case leter: var WantToRemember = React.createClass(...) and React.render(<WantToRemember />,....

JSX编译器要求组件名称为以大写字母开头（参见 jsx docs on this ：

The JSX compiler requires for component names to begin with an upper-case letter (see jsx docs on this):

要渲染React Component，只需创建一个以大写字母：

To render a React Component, just create a local variable that starts with an upper-case letter:

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

这篇关于在react.js中渲染新元素onClick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！