呈现由 jQuery 插入到 DOM 的元素

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 请求处理后附加的元素。

如何在调用 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 将尝试查找它之前的元素存在！

呈现由 jQuery 插入到 DOM 的元素

Render to element inserted to DOM by jQuery

javascript

ajax

jquery

reactjs