Question

尝试使用React.js时可能或者很可能我做错了什么？但是，当我运行React.Render（）时，没有任何可见的渲染。通过Chromes控制台查看DOM我可以看到任何事情都无法识别。

JSX

/* global React */
var notifying = {};
(function () {
    'use strict';
    notifying = React.createClass({
        getInitialState: function () {
            return { isSeen: false };
        },
        _handleDismissalClick: function () {
            this.setState({ isSeen: this.isSeen ? false : true });
        },
        render: function () {
            return ( <div className={'alert alert-success'} role={'alert'}> SOMETHING </div> );
        }
    });
})();

(function(){
    'use strict';
    React.render(<notifying />, document.querySelector('.__content'));
})();

JS

/* global React */
var notifying = {};
(function () {
    'use strict';
    notifying = React.createClass({displayName: "notifying",
        getInitialState: function () {
            return { isSeen: false };
        },
        _handleDismissalClick: function () {
            this.setState({ isSeen: this.isSeen ? false : true });
        },
        render: function () {
            return ( React.createElement("div", {className: 'alert alert-success', role: 'alert'}, " SOMETHING ") );
        }
    });
})();

(function(){
    'use strict';
    React.render(React.createElement("notifying", null), document.querySelector('.__content'));
})();

在DOM中，输出是

<notifying data-reactid=".0"></notifying>

任何人都可以向我解释我在哪里做错了所以我可以停止犯这个错误吗？

Answer 1

您正在创建<notifying /> DOM元素。相反，您需要调用method to create an element，然后将其传递给render method。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>

<script type="text/jsx">
/* global React */
var notifying = {};
(function () {
    'use strict';
    notifying = React.createClass({
        getInitialState: function () {
            return { isSeen: false };
        },
        _handleDismissalClick: function () {
            this.setState({ isSeen: this.isSeen ? false : true });
        },
        render: function () {
            return ( <div className={'alert alert-success'} role={'alert'}> SOMETHING </div> );
        }
    });
})();

(function(){
    'use strict';
    React.render(React.createElement(notifying), document.querySelector('.__content'));
})();
</script>

<div class="__content"></div>

html元素呈现为变量名

1 个答案: