1

洗練されたフレームワークを使用してコンポーネントを作成する方法を学んでいます。しかし、js ファイルにロードしたコンポーネントから 1 つのコンポーネントのみのインスタンスを作成できませんでした。

だから、これは私のhtmlファイルです：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
     </head>
     <body>
<script src="./build/ReviewPanelComponent.js"></script>
     </body>
 </html>

私のjs入力ファイル（コンポーネントをインポートする場所）：

import ReviewPanel from './ReviewPanel.html';

 const reviewPanel = new ReviewPanel({
      target: document.querySelector( 'body' ),
      data: 
        JSON.parse(localStorage.getItem('rooms'))

    });

      export default {
        components: {
            reviewPanel,
        }
    }

そして、コンポーネントの html:

<style>
#main{
    background-color:white;
}
h3,
h4,
h5{
    font-weight: bold;
}
</style>

<div class="container">
    <div class="row">
        <div id="main" class="col-xs-12">
            <div id="title">
                {{#if BookedRooms.length > 0}}
                    {{#each BookedRooms as br}}
                    <h3>{{br.Title}}</h3>
                        {{#each br.PossibleRateTypes as prt}}
                    <h4>{{prt.UUID}}</h4>

                        {{/each}}
                    {{/each}}
                {{/if}}             
            </div>
        </div>
    </div>
</div>

したがって、この時点で、js 入力ファイルにインスタンスがあるため、コンポーネントがロードされます。現時点で、2 つ目のインスタンスが必要な場合は、js ファイル自体の 1 つを作成する必要があります。私は、必要なすべてのコンポーネントをjsファイルにインポートし、それらを使用したいhtmlファイルにインポートするだけのように考えていました。

これは可能ですか？ドキュメントを読んでいますが、必要なものが見つかりません。

編集：私もwebpackを使用していると言うのを忘れていました。したがって、入力ファイルと出力ファイル。複数のコンポーネントを使用することができました。私が見つけた解決策は、js入力ファイルでこれを行うことでした：

import ReviewPanel from './ReviewPanel.html';

 window.ReviewPanel=ReviewPanel;
 window.ReviewPanel2=ReviewPanel;

インポートしたオブジェクトをグローバル変数に入れて、次のように、必要な場所で呼び出すことができるようにします。

<div id="reviewPanel"></div>
<script type="text/javascript">
    // Creates the review panel component
    window.ReviewPanel = new ReviewPanel({
        target: document.querySelector('#reviewPanel'),
        data:
        JSON.parse(localStorage.getItem('rooms'))

    });
</script>

それでも、私はこの解決策を持っていますが、グローバルオブジェクトに依存することなく、js入力ファイルに一度だけインポートしてから、必要な場所で次のように呼び出すだけです。

// And passing the parameters
<ReviewPanel />

React.js についてはあまり見たことがありませんが、プログラマーがこれを行っているのを一般的に見ている方法です。私は同じことを期待していました。それでも、他にやらなければならないことがあるので、後で最適化するために、今のところこのままにしておきます。

それでも、誰かがこれを行う方法を知っていれば、私はすべて耳です。私は Svelte を初めて使用し、ドキュメントを除いてあまり情報がないため、同じ部分で少し混乱していると思います.

4

1 に答える 1