複数のReactJSコンポーネントを1つのWebページにマウント

1つのWebページに複数の再利用可能なコンポーネントがあります。たとえば、ポップアップ、サイドバーニュースレターのサインアップ、コンテンツの下にある簡単なカルーセルなどがあります。複数のReactJSコンポーネントを1つのWebページにマウント

私はいくつかの研究の後、次のエラーに

'__reactInternalInstance$lvoo7hroqz' of null

を得ている私は、これがダウンして理にかなって、反応するように複数の呼び出しを有することにあると考えています。すべてのコンポーネントimports React私は、これは反応が各ノードにidを追加し、それが呼び出される各インスタンスで競合するためだと思います。

私の質問は、1つのWebページに複数のコンポーネントをレンダリングする方法です。親ノード/コンテナがない場合、これらの要素はサイト全体で個別に呼び出されます。

EDIT

おかげで、私は以下のようになり3つのコンポーネントがあります。

import React, { Component } from 'react' 

export default class test extends Component { 

render(){ 
return (<h1>test one</h1>) 
}

これらの3つのコンポーネントは、自分のページの周りにランダムに表示されます。ので、すべての私のコンポーネントが必要

<div> 
    <header> 
    Some HTML/PHP here 
    <ReactTestComponent /> 
    </header> 

    <div> 
    content here 
    <AnotherComponent /> 
    </div> 

    <FinalComponent/> 
</div>

（アーカイブページなどにしている場合によっては）これらの三つの要素は、常に「FinalComponent」次のページから消失する可能性があり、たとえば、同じページに表示されない「インポート各ファイルの上部にある「反応する」から反応します。

1つのページに複数のコンポーネントをレンダリングするとき。私は以下のエラーを受け取ります。私はそれは私の一部に誤りに気づいたこの小さな更に探して、

Uncaught TypeError: Cannot read property '__reactInternalInstance$lvoo7hroqz' of null 
at Object.getClosestInstanceFromNode (react.min.js:504) 
at findParent (react.min.js:36970) 
at handleTopLevelImpl (react.min.js:36999) 
at ReactDefaultBatchingStrategyTransaction.perform (react.min.js:6065) 
at Object.batchedUpdates (react.min.js:36768) 
at Object.batchedUpdates (react.min.js:1779) 
at dispatchEvent (react.min.js:37079)

出典

2017-08-30 Chris Barber-Riley

私は、開発者があなたの問題の理由を知る機会を得るために、より多くのコードを提供するべきだと思います。 –

私はもっと説明を追加しました。 –

私はあなたのウェブサイトをどのようにパッケージ化するかに関するビルドの問題だと思います。 – AndreaBogazzi