JQuery и React.js не играет хороший

Question

Ошибка:

_registerComponent(...): Target container is not a DOM element. 

Линия является причиной в main.jsx $('#container'). Когда я заменю это на document.getElementById('container'), все хорошо. Что я делаю не так? Является ли jQuery не предназначенным для работы с React?

index.jade

doctype html 
html 
    head 
     script(src="lib/babel/browser.min.js") 
     script(src="lib/react/react.min.js") 
     script(src="lib/react/react-dom.min.js") 
     script(src="lib/jquery/dist/jquery.min.js") 
    body 
     #container 

     script(src="public/js/main.jsx", type="text/babel") 

main.jsx

$(function(){ 
    var Doug = React.createClass({ 
     render: function(){ 
      return (<h1>Hello world</h1>); 
     } 
    }); 

    ReactDOM.render(
     <Doug></Doug>, 
     $('#container') 
    ); 
}); 

Answer 1

$('#container') является объектом JQuery, а не DOM элемент, попробуйте $('#container')[0]

Answer 2

, если вы запустите console.log($('#container'));, а затем проверить ответ вы увидите, что он не возвращает объект DOM так же, как это делает document.getElementById('container');.

Записывая их оба, jquery фактически возвращает объект jquery в jquery fn. namespace (т.е. n.fn.init[1]), который имеет массив со ссылкой на этот элемент DOM. React и jquery должны быть в состоянии работать рядом друг с другом. Я не проверял, но вы могли бы попробовать что-то вдоль линий:

ReactDOM.render(<Doug></Doug>, $('#container').outerHTML()); 

, но к тому моменту он просто имеет смысл использовать родной JS метод для целевого сайта визуализации.