Question

在我的应用程序中，我使用AJAX获取特定的视图（模板）文件，并在页面加载时使用jQuery将其附加到DOM：

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

视图中有各种元素我想引用并呈现为使用React。例如，要加载一系列帮助台票，我可能会执行以下操作：

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

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

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

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

Answer 1

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

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

在<{em> siteFetchComplete()操作之后，还将调用移至append()到，否则jQuery将尝试在元素存在之前找到它！

渲染到jQuery插入DOM的元素

1 个答案: