jQuery 和 React.js 表现不佳

Question

错误：

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

引起的行是 $('#container')in main.jsx。当我用它代替 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')); 然后检查答案你会发现它 return 一个 DOM 对象与运行ning document.getElementById('container'); 确实如此。

将它们都记录下来，jquery 一个实际上 return 是 jquery fn 中的一个 jquery 对象。具有引用该 DOM 元素的数组的命名空间（即 n.fn.init[1]）。 React 和 jquery 应该能够运行并排。我还没有测试过，但你可以尝试以下方式：

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

但到那时，使用本机 js 方法定位渲染站点更有意义。

jQuery 和 React.js 表现不佳

jQuery and React.js aren't playing nice

jquery

reactjs

react-dom

pug