Question

我有一个名为App.js的文件，它是我应用程序的主要组件。

我在该文件的render方法返回的结果中放置了一个新组件：

return (
    <div>
      <AjaxReq />
      //many other components
    </div>
);

其中AjaxReq是以下方法：

'use strict';

var AjaxReq = React.createClass({

    loadDoc: function() {
        $.ajax({
            url: "someUrl",
            context: document.body,
            success: function(){
              $(this).addClass("done");
            }
        });
    },

    render: function() {
        return (<div>
            <p onClick={this.loadDoc}>
                Click this to make AJAX request.
            </p>
        </div>);
    }

});


module.exports = AjaxReq;

不幸的是，页面中根本不呈现此组件。我的代码有问题吗？

Answer 1

我不认为此代码段$(this).addClass("done");会执行您打算执行的操作。
在该上下文中， this 指的是React组件（Virtual DOM），而不是DOM中的实际元素。

访问React之外的React Component实例的唯一方法是存储ReactDOM.render的返回值。

也有任何机会，您是否忘记将React（var React = require('react')）导入AjaxReq模块？

Answer 2

就像phpcoderx所说，不导入React可能导致无法渲染。要像你想要的那样添加CSS类，你可能想要做更多类似的事情（尽管我认为这不会影响你看到的初始渲染问题的缺乏）。

'use strict';

var AjaxReq = React.createClass({
    loadDoc: function() {
        $.ajax({
            url: "someUrl",
            context: document.body,
            success: function(){
                this.setState({ isLoaded: true });
            }
        });
    },

    getInitialState: function() {
        return { isLoaded: false };
    },

    render: function() {
        var classname = this.state.isLoaded ? 'done' : '';

        return (<div className={classname}>
            <p onClick={this.loadDoc}>
                Click this to make AJAX request.
            </p>
        </div>);
    };
});

module.exports = AjaxReq;

React组件未呈现

2 个答案: