时间戳

首页 > 解决方案 > 如何使 Aux 在反应中工作（高阶组件）

javascript - 如何使 Aux 在反应中工作（高阶组件）

问题描述

大家好，我在渲染 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

标签： javascriptajaxreactjs

解决方案

我建议使用 React 片段，它们做同样的事情：https ://reactjs.org/docs/fragments.html

推荐阅读