React & Webpack render exported by external package

I am trying to use the React component that appears in an external script (bundle A) in my main React application (bundle B).

The React outer header component (bundle A) is loaded through <script>and displayed as a global window variable using Webpack expose-loader .

My site then links to the packages in the following sequence:

  • React / ReactDOM Kit
  • External header component component (bundle A)
  • Main application package (set B)

The external component of the header can then be referenced through window.appHeaderBundlein the main application (set B), for example.

enter image description here

const Header = window.appHeaderBundle.default;, render(), jsx <Header />.

, :

: ref (searchForm), . React.

, , ?

EDIT: , <h1>test</h1>. ref - , !


, . . NPM, , , , .

0
2

, - , ?

, . , npm .

  • npm HTTP- .
  • , ? , - . npm .
+1

, React. webpack "" ( ). , , - , React .

, window.React = React , . , React ( vendor) , Javascript.

https://webpack.js.org/configuration/externals/

, , , , , React.

0

Source: https://habr.com/ru/post/1680196/


All Articles