[英]Render to element inserted to DOM by jQuery
In my app I use AJAX to fetch a specific view (template) file and append it to the DOM using jQuery on page load: 在我的应用程序中,我使用AJAX来获取特定的视图(模板)文件,并在页面加载时使用jQuery将其附加到DOM:
$.get('/ajax/load/myview', function(view) {
siteFetchComplete();
$('#container').append(view);
});
There are various elements in the view that I would like to reference and render to using React
. 我想引用并渲染使用
React
各种元素。 For example, to load a series of helpdesk tickets I might do something like: 例如,要加载一系列帮助台票证,我可以执行以下操作:
function siteFetchComplete() {
var TicketBox = React.createClass({
render: function() {
return (
<h1>Helpdesk Tickets</h1>
);
}
});
React.render(
<TicketBox />,
$('#tickets')
);
}
where $('#tickets')
is an element that was appended after the AJAX request processed. 其中
$('#tickets')
是在处理AJAX请求之后附加的元素。
How do I reference $('#tickets')
when calling React.render
? 调用
React.render
时如何引用$('#tickets')
? Currently I receive a Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
当前,我收到一个
Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
error because React can't see the element when called this way. 错误,因为以这种方式调用时React无法看到该元素。
You're passing a jQuery wrapper object to React instead of a DOM element. 您正在将jQuery包装器对象传递给React而不是DOM元素。 Instead you should unwrap it using jQuery's
get()
method and pass the raw DOM object to React: 相反,您应该使用jQuery的
get()
方法对其进行解包,并将原始DOM对象传递给React:
$('#tickets').get(0) // returns the DOM element
Also move the call to siteFetchComplete()
to after the append()
operation, otherwise jQuery will be trying to find the element before it exists! 此外移动呼叫
siteFetchComplete()
到之后 append()
操作,否则jQuery将试图找到该元素存在,才!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.