将多个ReactJS组件安装到单个网页中

Question

I have multiple, reusable components on a single web page. For example, a popup, sidebar newsletter signup and a simple carousel below the content.

I'm getting the following error

'__reactInternalInstance$lvoo7hroqz' of null

After some research I believe this is down to having multiple calls to react, which makes sense. Every component imports React I believe this is due to the fact react adds id's to each node and it conflicts on each instance that's called.

My question is how would I render multiple components on a single web page? when there's no parent node/container and these elements are called individually throughout the site.

Thanks

EDIT

I have three components that look similar to below.

import React, { Component } from 'react'

export default class test extends Component {

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

These three individual components appear randomly around my page.

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

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

  <FinalComponent/>
</div>

These three components do not always appear on the same page, for instance "FinalComponent" may be missing from the next page (depending if you're on a archive page etc) so all my components need "import React from 'react'" at the top of each file.

When I render multiple components on a single page. I get the following errors. (Based on the amount of components rendered, if I render two components I get two of the same error)

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)

Answer 1

OK, looking into this a little further I noticed it was a error on my part.

One of the includes was calling the same react file in addition to the footer, so I had two referenced to react.min.js causing the conflict.

Hope this helps someone.