Question

我在一个网页上有多个可重复使用的组件。例如，弹出，侧边栏简报注册和内容下方的简单轮播。

我收到以下错误

'__reactInternalInstance$lvoo7hroqz' of null

经过一些研究后，我认为这取决于多次调用反应，这是有道理的。每个组件导入React 我认为这是因为react会将id添加到每个节点，并且它会在每个被调用的实例上发生冲突。

我的问题是如何在一个网页上呈现多个组件？如果没有父节点/容器，则在整个站点中单独调用这些元素。

由于

编辑

我有三个与下面类似的组件。

import React, { Component } from 'react'

export default class test extends Component {

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

这三个单独的组件随机出现在我的页面周围。

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

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

  <FinalComponent/>
</div>

这三个组件并不总是出现在同一页面上，例如＆＃34; FinalComponent＆＃34;可能会在下一页中遗漏（取决于您是否在存档页面等），因此我的所有组件都需要＆＃34;导入React来自＆＃39;反应＆＃34;＆＃34;在每个文件的顶部。

当我在一个页面上渲染多个组件时。我收到以下错误。（根据渲染的组件数量，如果我渲染两个组件，我得到两个相同的错误）

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

好的，再深入研究一下，我注意到这是我的错误。

除了页脚之外，其中一个包括调用相同的反应文件，所以我有两个引用react.min.js引起冲突。

希望这有助于某人。

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

1 个答案: