Webpackバンドル内の反応コンポーネントのライブラリ実行時のレンダリングで使用するためのエクスポート

Question

反応コンポーネントを使用するために従来のweb2py（Python）アプリケーションをアップグレードしています。 jsxファイルをjsバンドルに縮小するためにwebpackを使用しています。

ReactDOM.render(
    <ComponentA arg1="hello" arg2="world" />, 
    document.getElementById('react-container') 
); 

ここで、ComponentAはバンドルに含まれており、バンドルはweb2pyビューに含まれています。問題は、ビューでComponentAにアクセスできないことです。

<script> 
var ComponentA = React.createClass({ 
    render: function() { 
     var p = React.createElement('p', null, 'Passed these props: ',this.props.arg1, ' and ', this.props.arg2); 
     var div = React.createElement('div', { className: 'my-test' }, p); 
     return div; 
    } 
}); 

var component = React.createElement(ComponentA, {arg1:"hello", arg2:"world"}) 
ReactDOM.render(
    component,//I would rather use <ComponentA arg1="hello" arg2="world" />, 
    document.getElementById('react-sample') 
); 

</script> 

は、私がexports-loaderとに見えたが、私はまだそれが動作するように得ていない次の例では動作します。どんな助けでも大歓迎です。

Answer 1

私は（すべてのコンポーネントをインポートします）あなたのmain.jsxファイルには、それらを輸出していることを確認してくださいthis StackOverflow answer

まず出くわした後、私はそれを解決：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import ComponentA from './components/A'; 
import ComponentB from './components/B'; 
import style from '../stylesheets/main.scss'; 

// This is how every tutorial shows you how to get started. 
// However we want to use it "on-demand" 
/* ReactDOM.render(
    <ComponentA arg1="hello" arg2="world" />, 
    document.getElementById('react-container') 
);*/ 

// ... other stuff here 

// Do NOT forget to export the desired components! 
export { 
    ComponentA, 
    ComponentB 
}; 

その後必ずでoutput.library("more" info in the docs)を使用しますwebpack.config.jsファイル：

module.exports = { 
    entry: { 
     // 'vendor': ['bootstrap', 'analytics.js'], 
     'main': './src/scripts/main.jsx' 
    }, 
    output: { 
     filename: './dist/scripts/[name].js', 
     library: ['App', 'components'] 
// This will expose Window.App.components which will 
// include your exported components e.g. ComponentA and ComponentB 
    } 
// other stuff in the config 
}; 

次にweb2pyでw（ビルドファイルを必ず含めてください。 main.jsし、適切なコンテナ）：

<!-- Make sure you include the build files e.g. main.js --> 
<!-- Some other view stuff --> 
<div id="react-component-a"></div> 
<div id="react-component-b"></div> 
<script> 
// Below is how it would be used. 
// The web2py view would output a div with the proper id 
// and then output a script tag with the render block. 
ReactDOM.render(
    React.createElement(App.components.ComponentA, {arg1:"hello", arg2:"world"}), 
    document.getElementById('react-component-a') 
); 

ReactDOM.render(
    React.createElement(App.components.ComponentB, {arg1:"hello", arg2:"world"}), 
    document.getElementById('react-component-b') 
); 
</script> 

注：私はバニラを使用することにしましたので、追加transpilingは、ブラウザで実行する必要がない代わりにJSXを考慮して反応します。