挂载 React-Popup 组件抛出渲染错误

Question

我正在尝试使用以下代码在页面的初始呈现中安装一个反应弹出组件以及我的实际应用程序代码（按照文档的建议）：

import React from 'react';
import ReactDOM from 'react-dom';
import Popup from 'reactjs-popup';

ReactDOM.render(
    <div>
        <Popup />
        <App />
    </div>,
    document.getElementById('root')
);


class App extends React.Component {
    render() {
        return (
            <div className="main-outer">
                <div className= "main-middle">
                    <div className = "main-container">
                        <div className="row">
                            <div className = "large-12 columns">
                                <Canvas />
                            </div>
                        </div>
                   </div>
               </div>
            </div>
        );
    }
}

但我收到以下错误：

invariant.js:42 Uncaught Error: Popup.render(): A valid React element (or 
null) must be returned. You may have returned undefined, an array or some 
other invalid object.
at invariant (invariant.js:42)
at ReactCompositeComponentWrapper._renderValidatedComponent 
(ReactCompositeComponent.js:828)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:359)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)
at Object.mountComponent (ReactReconciler.js:43)
at ReactDOMComponent.mountChildren (ReactMultiChild.js:234)
at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:701)
at ReactDOMComponent.mountComponent (ReactDOMComponent.js:520)
at Object.mountComponent (ReactReconciler.js:43)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:368)

页面无法完全呈现。任何帮助深表感谢。

Answer 1

首先：把你的ReactDom.render函数移到App组件下面，这样它就可以访问它了。其次：根据 React 官方网站上的 React DOM 渲染方法文档，它的签名如下所示：react dom render

 ReactDOM.render(reactElement, domContainerNode);

或

ReactDOM.render(element, container[, callback])

即使你想渲染多个元素，你也可以这样做：

let eleArr = (
  <div>
    <Popup/>
    <App />
  </div>
);

ReactDOM.render(eleArr, document.getElementById("root"));

我认为这种方法会更简洁。

工作示例 here 我刚刚为您创建。

Answer 2

我的问题是显然有两个独立的库 reactjs-popup 和 react-popup，每个库都由两个不同的有用链接推荐。这里是 hackernoon and the official docs。使用 reactjs-popup 没有挂载，但是当我

import Popup from react-popup

有效。

挂载 React-Popup 组件抛出渲染错误

Mounting React-Popup component throws render error

web-frontend

reactjs