ルータコンポーネントなしでreactを使用する

私は、1ページではないreactjsを使ってWebアプリケーションを作成したいのですが。すべての反応コードを1つのファイルにコンパイルし、アプリケーションのすべてのページにロードする必要がありますか？次に、公開する関数を使用して必要なコンポーネントをレンダリングしますか？私が増加し、品質と難易度の2つの方法が、参照してくださいねindex.jsルータコンポーネントなしでreactを使用する

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Clock from './Clock'; 
import HelloWorld from './HelloWorld'; 
import OtherComponent from './OtherComponent'; 

const APPS = { 
    Clock, 
    HelloWorld, 
    OtherComponent 
}; 

const MyReactRender = react => { 

    let component = react.getAttribute('data-react'); 
    let App = APPS[component]; 

    if(App != undefined) { 
     ReactDOM.render(<App />, document.getElementById(component)); 
    } 
} 

document.querySelectorAll('[data-react]').forEach(MyReactRender);

出典

2017-09-01 MrGilbertMan

私はちょうど 'if（document.getElementById（ 'Clock'））{/ * activate react component * /}' –

を入力していただきありがとうございます。しかし、アプリケーションが大きく成長する可能性があるので、この方法を使用するのは正しいでしょうか？ – MrGilbertMan

いいえ、間違いなく推奨される方法ですが、唯一の本当の欠点はバンドルのサイズとますます多くのifsです。より良い方法は、webpackを使用して、アプリケーションの異なる部分をバンドルし、それぞれの異なるページにロードすることだけです。 –

の例

<div id="Clock" data-react="Clock"></div> 
<div id="HelloWorld" data-react="HelloWorld"></div>

htmlファイルの

例。どちらの場合も、古い古いアンカー要素を使用して、ページをURLにリダイレクトします。このテンプレートには異なるテンプレートが対応しています。

手動この場合のdivのIDの

の存在を確認し、各テンプレートは、アプリケーションと、特定の構成要素に対応するIDを持つ単一要素のすべてを含む同じJavaScriptの束を含みます。アイデアは、要素がページ内に存在するかどうかをチェックし、対応する反応成分が存在する場合にはそれを活性化することである。

if (document.getElementById('component-root')) { 
    ReactDOM.render(<Component />, document.getElementById('component-root')); 
}

非常に簡単に実装されています。下側では、バンドルは常に大きくなり、ifのリストは新しい「ページ」を追加するたびに増加します。実際のバンドル内の別の

あなたのモジュールは

異なるバンドルマネージャは存在しますが、私はあなたのアプリケーションの特定の部分のみを含む複数のバンドルを作成するためのWebPACKを使用してお勧めします。次に、各テンプレートには対応するdiv要素とその特定のバンドルだけが含まれます。 WebPACKのに複数のバンドルをパッケージ化する方法

<head><script src="/js/clock.js"></head> 
<body><div id="root-clock"></div></body>

<head><script src="/js/otherComponent.js"></head> 
<body><div id="root-other-component"></div></body>

この回答の範囲外であるが、hereを見て。

出典

2017-09-01 16:09:42

私はルータなしで反応するアプリケーションを作ってみました。私はコンポーネントからコンポーネントに切り替えるために三項演算子を使いました。

// App Component 
class App extends Component { 
    constructor(props) { 
    super(props) 

    this.state = { 
     inClockComponent: true, 
     inHelloWorldComponent: false, 
     inOtherComponent: false 
    } 

    } 


render() { 
    const {inClockComponent, inHelloWorldComponent, inOtherComponent} = this.state 
    return (
     <div> 
     { 

     inClockComponent 
     ? <Clock> : inHelloWorldComponent 
      ? <HelloWorld> : inOtherComponent ? <OtherComponent> : 
       <div>No Component Here</div> 

     } 
    </div> 
    }

あなたはあなたが上にその関数を挿入

// in App Component 
showHelloWorldComponent() { 
    this.setState({ 
     inClockComponent: false, 
     inHelloWorldComponent: true, 
     inOtherComponent: false 
    )} 
}

例App

の各子コンポーネントに表示状態を変更しますAppコンポーネントから関数を渡すことができ

別のコンポーネントにナビゲートするボタン

例

// in Clock Component render() { return ( <div> <h2>Time is 5:15 P.M.</h2> <button onClick={this.props.showHelloWorldComponent}> Go To Hello World </button> ) }

それは厄介な解決策だ、と私は大きなアプリケーションでそれを使用することをお勧めしませんが、私はこれがあなたの質問に答える願っています！

出典

2017-09-01 16:32:38 Tomy

ルータコンポーネントなしでreactを使用する

答えて

関連する問題