使用 jquery 选择器渲染 reactjs

Question

我在构建测试应用程序时使用 jquery 作为 ajax，同时学习 React。

是否可以使用 jquery 选择器作为渲染 React 组件的目标？

本文来自 react tut.:

React.render(
    <FilterableProductTable products={PRODUCTS} />,
    document.getElementById('content')
);

这行不通，但我什至不知道是否可行:

React.render(
    <FilterableProductTable products={PRODUCTS} />,
    $('#content')
);

谢谢，约翰

Answer 1

这样就可以了

React.render(
    <FilterableProductTable products={PRODUCTS} />,
    $('#content')[0]
);

Answer 2

您可以覆盖 ReactDOM.render() 以接受 Element 和 DOM 选择器字符串：

ReactDOM.render = (origFunc => {
  return (element, elementOrSelector, callback) => {
    const el = (elementOrSelector instanceof Element)?
          elementOrSelector : document.querySelector(elementOrSelector);
    return origFunc.call(ReactDOM, element, el, callback);
  }
})(ReactDOM.render)

使用任一选项：

ReactDOM.render(
    <div>Hello</div>,
    document.getElementById('content')
);

ReactDOM.render(
    <div>Hello</div>,
    '#content'
);

使用 jquery 选择器渲染 reactjs

Using jquery selectors to render reactjs

javascript

jquery

reactjs