大家好,我在渲染 Aux 元素时遇到问题。我想渲染传递给 Aux 的子元素,但不在同一个 div 下。
React.fragment 可以将它作为数组传递也可以,但是当我将它作为 Aux 传递时,会出现错误。
编码
应用程序.js
import React, {Component} from 'react';
import Layout from './components/Layout/Layout';
class App extends Component {
render() {
return (
<div key="app1">
<Layout>
<p>Hello world</p>
</Layout>
</div>
);
}
}
export default App;
索引.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
布局.js
辅助.js
import React from 'react';
import Aux from '../../hco/Aux';
const layout = ( props ) => (
<Aux>
<div>Toolbar, SideDrawer, Backdrop</div>
<main>
{props.children}
</main>
</Aux>
);
export default layout;**
谷歌浏览器控制台中的错误:
**
第一个镀铬错误:
Uncaught Error: aux(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
at reconcileChildFibers (react-dom.development.js:15675)
at reconcileChildren (react-dom.development.js:18093)
at mountIndeterminateComponent (react-dom.development.js:18833)
at beginWork$1 (react-dom.development.js:20121)
at HTMLUnknownElement.callCallback (react-dom.development.js:337)
at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
at invokeGuardedCallback (react-dom.development.js:439)
at beginWork$$1 (react-dom.development.js:25723)
at performUnitOfWork (react-dom.development.js:24646)
at workLoopSync (react-dom.development.js:24622)
at performSyncWorkOnRoot (react-dom.development.js:24211)
at scheduleUpdateOnFiber (react-dom.development.js:23638)
at updateContainer (react-dom.development.js:27047)
at react-dom.development.js:27464
at unbatchedUpdates (react-dom.development.js:24376)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:27463)
at Object.render (react-dom.development.js:27548)
at Module../src/index.js (index.js:7)
at __webpack_require__ (bootstrap:785)
at fn (bootstrap:150)
at Object.0 (serviceWorker.js:135)
at __webpack_require__ (bootstrap:785)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at main.chunk.js:1
第二个镀铬错误:
index.js:1375 The above error occurred in the <aux> component:
in aux (at Layout.js:8)
in layout (at App.js:9)
in div (at App.js:8)
in App (at src/index.js:7)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit /react-error-boundaries to learn more about error boundaries.
第三个镀铬错误:
Uncaught Error: aux(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
at reconcileChildFibers (react-dom.development.js:15675)
at reconcileChildren (react-dom.development.js:18093)
at mountIndeterminateComponent (react-dom.development.js:18833)
at beginWork$1 (react-dom.development.js:20121)
at HTMLUnknownElement.callCallback (react-dom.development.js:337)
at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
at invokeGuardedCallback (react-dom.development.js:439)
at beginWork$$1 (react-dom.development.js:25723)
at performUnitOfWork (react-dom.development.js:24646)
at workLoopSync (react-dom.development.js:24622)
at performSyncWorkOnRoot (react-dom.development.js:24211)
at scheduleUpdateOnFiber (react-dom.development.js:23638)
at updateContainer (react-dom.development.js:27047)
at react-dom.development.js:27464
at unbatchedUpdates (react-dom.development.js:24376)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:27463)
at Object.render (react-dom.development.js:27548)
at Module../src/index.js (index.js:7)
at __webpack_require__ (bootstrap:785)
at fn (bootstrap:150)
at Object.0 (serviceWorker.js:135)
at __webpack_require__ (bootstrap:785)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at main.chunk.js:1