我正在尝试在页面的初始呈现中安装一个react-popup组件,以及我的实际应用代码(如文档所建议)以及以下代码:
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)
页面无法完全呈现。任何帮助深表感谢。
答案 0 :(得分:0)
第一:将您的ReactDom.render函数移动到App组件下方,以便它可以访问它。 第二: 根据官方react网站上的react DOM渲染方法doc,其签名如下所示: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。
答案 1 :(得分:0)
我的问题是,显然有两个单独的库reactjs-popup和react-popup,分别由两个不同的有用链接推荐。这里是hackernoon和官方docs。使用reactjs-popup不会挂载,但是当我
import Popup from react-popup
有效。