Рендеринг нового элемента onClick в react.Яш

Я новичок в react и пытаюсь отобразить новый элемент 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>
            );
        }
    });

но он не появляется, вместо этого react отображает этот html:

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

Я уверен, что я делаю некоторые довольно простые вещи неправильно, но не могу понять, что. Разве нельзя так называть разные элементы?

9
javascript reactjs

2 ответов

код react.js имя компонента начинается с буквы нижнего регистра, оно должно начинаться с буквы верхнего регистра:var WantToRemember = React.createClass(...) и React.render(<WantToRemember />,....

компилятор JSX требует, чтобы имена компонентов начинались с буквы верхнего регистра (см. jsx документы на этот):

чтобы отобразить компонент React, просто создайте локальную переменную, которая начинается с буквы верхнего регистра:

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

вы должны передать элемент React для React.рендеринг вместо самого тега, что-то вроде этого:

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