javascript - 渲染到通过 jQuery 插入到 DOM 的元素

Question

在我的应用程序中，我使用 AJAX 来获取特定 View (模板)文件，并在页面加载时使用 jQuery 将其附加到 DOM:

$.get('/ajax/load/myview', function(view) {
    siteFetchComplete();
    $('#container').append(view);
});

我想使用 React 引用和渲染 View 中的各种元素。例如，要加载一系列帮助台票证，我可能会执行以下操作:

function siteFetchComplete() {
    var TicketBox = React.createClass({
        render: function() {
            return (
                <h1>Helpdesk Tickets</h1>
            );
        }
    });

    React.render(
        <TicketBox />,
        $('#tickets')
    );
}

其中 $('#tickets') 是在 AJAX 请求处理后附加的元素。

调用 React.render 时如何引用 $('#tickets')？目前，我收到一个 Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element. 错误，因为以这种方式调用时 React 无法看到该元素。

Answer 1

您将 jQuery 包装对象而不是 DOM 元素传递给 React。相反，您应该使用 jQuery 的 get() 方法解开它，并将原始 DOM 对象传递给 React:

$('#tickets').get(0) // returns the DOM element

还将对 siteFetchComplete() 的调用移至 append() 操作之后，否则 jQuery 将尝试在之前查找元素它存在!