javascript - React 组件未渲染

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 组件(虚拟 DOM)，而不是 DOM 中的实际元素。

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

此外，您是否忘记将 React (var React = require('react') ) 导入到您的 AjaxReq 模块中？